小程序tabBar 動態添加、刪除實現過程

首先，小程序的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
      })
}    

 

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