Small program realizes dynamic tabbar

The requirement is that the tabbar can be set in the background of the applet depends on the scale that can be changed. If it is not in the applet, then the bottom tabbar can be rendered casually, and the front end is nothing more than requesting data to be rendered to the page in a loop. Similar to the background system, request the left navigation bar according to the permission

But this mode has a premise that the total number is fixed and there are corresponding names and paths , but in the applet, although the bottom tabbar is limited to 5, each of them must be dynamically generated in the bottom navigation list in app.json. Corresponding to the page, the provided api cannot modify app.json or use custom-tab-bar

Finally decided to use the vant-weapp van-tabbar component to implement the app.json registration. Some pages used are encapsulated with {{behaviors}}, and the jumps between each other use wx.redirectTo

  <van-tabbar active="{ { active }}" bind:change="onChange" active-color="#fff" inactive-color="#fff">

  <van-tabbar-item  wx:for="{ {tabBarList}}" wx:key="index"  style="{ {index === active ? 1 : touming}}" >

    <image

      slot="icon"

      src="{ { item.IconPath }}"

      mode="aspectFit"

      style="width: 26px; height: 26px;"

    />

    <image

      slot="icon-active"

      src="{ { item.IconPath }}"

      mode="aspectFit"

      style="width: 26px; height: 26px;"

    />

    { {item.text}}

  </van-tabbar-item>

</van-tabs>

  // 点击tabbar 回调
  onChange(e){
    if(this.data.active === e.detail) return // 点击当前页面什么也不做
    let id = this.data.tabBarList[e.detail].id;  // 取到点击那一项的id
    wx.redirectTo({
      // 跳转对应路径 传参 id 
      url: this.data.tabBarList[e.detail].pagePath + '?id=' + id
    })
},

After clicking, the index value determines which item is clicked to determine what page to jump to and the id of the initial request data passed in

The list rendered by the tabbar is requested when entering the applet, and then judge which page it corresponds to according to the attributes of each item

// 进入页面前 请求 底部的导航栏 并且按照需求抽并封装数据
getTabbar(){
      wx.request({
          url: 'xxxxxxxx',
          method: 'POST',
        data:{
          storeId:wx.getStorageSync('storeData').id, // 传参门店id
          status:1 // 获取正常显示的
        },
        success: res =>{
          let yuan = res.data.data // 转存元数据
          let aaa = yuan.map(x =>{
            // map 出 tabar 的数据
            return {
              text:x.moduleName, // 模块名字
              IconPath:x.iconUrl, // 图标的 url
              id:x.moduleId, // 模块 id 根据id切换tabar
              moduleStorey:x.moduleStorey, // 模块的层级 最多 3 层
              isHomePage:x.isHomePage, // 是否是首页
              moduleStyle:x.moduleStyle, // 显示格式 0图文  1文字
              sort:x.sort, // 排序
            }
          })
          aaa.forEach(e => {
            // 首页有标识 isHomePage 直接对应 pages/index 固定对应的页面
            if(e.isHomePage === 1){
              e.pagePath="/pages/index/index"
              // 二级或者三级 文字展现形式的页面  pages/wenzi_tuwen_anli
            }else if((e.moduleStorey === 2 || e.moduleStorey === 3) && e.moduleStyle === 1){
              e.pagePath="/pages/wenzi_tuwen_anli/wenzi_tuwen_anli"
              // 二级图文 对应的页面 /pages/tuwen_tuwen_notab
            }else if(e.moduleStorey === 2  && e.moduleStyle === 0){
              e.pagePath="/pages/tuwen_tuwen_notab/tuwen_tuwen_notab"
              // 一级或者三级 图文 对应的页面 /pages/tuwen_anli
            }else if(e.moduleStorey === 1  || e.moduleStorey === 3){
              e.pagePath="/pages/tuwen_anli/tuwen_anli"
            }
          })
          aaa.sort((a,b) => a.sort - b.sort) // 进行排序
        }
        });
      },

Small program realizes dynamic tabbar

Guess you like