【微信小程序】自定义tabBer

本文主要是介绍【微信小程序】自定义tabBer，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1.在app.json中添加如下

{
  "tabBar": {
    // 添加custom：true，不删除原本list目录，保证低版本可以正常运行

    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

2.添加 tabBar 代码文件

在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3.编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例

4.保留list后，也可将list粘贴到.js文件循环渲染到页面

5.解决tabber栏图标索引出错的bug

1. 将data中的active删除
2. 将active绑定到store中（tabBerIndex）
3. 在store中创建tabBerIndex，并创建对应的actions方法来修改tabBerIndex值
4. 组件标签中的 active="{{ tabBerIndex }}" 修改为store中的
5. onChange方法中使用 this.changeTabBerIndex(event.detail)来修改store中的tabBerIndex值

这篇关于【微信小程序】自定义tabBer的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！