小程序tabBar 动态添加删除实现过程

Posted 2021-02-20 Alpiny’ Blog

首先，小程序的tabbar能动态的添加删除吗？答案是可以的。

实现过程：

1. 开启小程序的自定义tab组件。
2. 添加自定义tab组件目录。
3. 在tab页onshow中，定义渲染函数，动态的去渲染自定义tab组件的内容。

 

代码：

1开启小程序的自定tab组件。

app.json文件

"tabBar": {
    "custom": true, // 这里开启自定义
     "list": [
        // 注意，这里面一定要完整定义tab页的信息，tabbar才会生效！
        ......
        ......
    ]
}

2.项目根目录创建 custon-tab-bar 组件

组件内容，参考官方文档下面的示例：

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

 

3.首页 index.js 文件

onShow: function () {
    let list = [ // 这里是 tabbar的列表，可以根据业务增减
       。。。。。
    ]

　　 // 这里可以根据业务逻辑增减 list内容

    this.getTabBar().setData({
        selected: 0, // 这里是首页tab信息的索引
        list:list
      })
}    

 

只是给出了过程，如果有不明白的小伙伴，可以给我留言。