526互联

微信小程序自定义tabbar

发布时间 2023-07-08 13:03:26作者: Moooooocc

自定义tabbar

自定义 tabBar | 微信开放文档 (qq.com)

代码根目录层级新建custom-tab-bar

ustom-tab-bar/index.js

custom-tab-bar/index.json

custom-tab-bar/index.wxml

custom-tab-bar/index.wxss

引入Vant Weapp组件

1. 在工程目录层级（与app.json同级），npm install，初始化package.json文件

2. npm i @vant/weapp

3. 修改app.json，去除 "style":"v2"  防止样式覆盖

4. 修改project.config.json，使开发者工具可以正确找到npm依赖路径

"packNpmManually": true,
"packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",   // package.json所在路径
      }
]

5. 工具 => npm构建，默认构建路径为当前项目根路径，关联miniprogramNpmDistDir属性

开发注意

  • 每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。
  • 如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。可参考底部的代码示例
onShow() {
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected : 0
            })
        }
}