小さなプログラムで動的タブバーを実現

小さなプログラムのバックグラウンドにタブバーを設定できることが要件であり、変更できるスケールによって異なります.小さなプログラムにない場合は、下部のタブバーがさりげなくレンダリングされ、フロントエンドはそれ以上のものではありませんループでページにレンダリングされるデータを要求します。バックグラウンドシステムと同様に、許可に従って

ただ、このモードは総数が固定で対応する名前とパスがあることが前提なのですが、アプレットでは一番下のタブバーが5つに制限されているものの、それぞれをapp.jsonの一番下のナビゲーションリストに動的に生成する必要があります. ページに対応して、提供された API は app.json を変更したり、custom-tab-bar を使用したりできません

最後に、vant-weapp van-tabbar コンポーネントを使用して app.json 登録を実装することにしました. 使用されている一部のページは {{behaviors}} でカプセル化されており、ページ間のジャンプは 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}}" >

    <画像

      スロット="アイコン"

      src="{ { item.IconPath }}"

      モード="aspectFit"

      スタイル="幅: 26px; 高さ: 26px;"

    />

    <画像

      slot="アイコンアクティブ"

      src="{ { item.IconPath }}"

      モード="aspectFit"

      スタイル="幅: 26px; 高さ: 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
    })
},

クリック後、インデックス値によって、クリックされた項目が決定され、ジャンプ先のページと、渡された最初の要求データの ID が決定されます。

アプレットに入るとタブバーでレンダリングされたリストが要求され、各項目の属性に応じてどのページに対応するかを判断します

// 进入页面前 请求 底部的导航栏 并且按照需求抽并封装数据
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) // 进行排序
        }
        });
      },

小さなプログラムで動的タブバーを実現

おすすめ