微信小程序動態tab-bar, 解決頁面跳動問題

通過自定義組件實現動態tab-bar，並且防止tab切換時出現跳動問題

將tab頁面寫成一個組件（不知道有啥副作用，不過目前似乎可行）

小程序ui框架（Vant Weapp）

1. index(wxml)

<block>
    <view wx:if="{{active == '待辦通知'}}">
        <todo-notice></todo-notice>
    </view>
    <view wx:if="{{active == '入戶檢查'}}">
        <indoor-check></indoor-check>
    </view>
    <view wx:if="{{active == '電話回訪'}}">
        <text>電話回訪</text>
    </view>
    <view wx:if="{{active == '督促整改'}}">
        <text>督促整改</text>
    </view>
    <view wx:if="{{active == '我的'}}">
        <text>我的</text>
    </view>
</block>

<van-tabbar active="{{ active }}" bind:change="onChange" placeholder="true" safe-area-inset-bottom>
    <van-tabbar-item wx:for="{{list}}" wx:key="index" name="{{item.text}}" wx:if="{{item.isShow}}">
        <image slot="icon" src="{{ item.iconPath }}" mode="aspectFit" style="width: 28px; height: 28px;" />
        <image slot="icon-active" src="{{ item.selectedIconPath }}" mode="aspectFit"
            style="width: 28px; height: 28px;" />
        {{item.text}}
    </van-tabbar-item>
</van-tabbar>

2. index(index.js)

const app = getApp()

Page({
  data: {
    active: '',
    title: '首頁',
    list: []
  },
  onLoad() {
    this.setData({ //動態tab-bar數據格式
      list: [{
          index: 0,
          pagePath: "/pages/index/index",
          text: "待辦通知",
          iconPath: "../../images/tab_bar/dbtz.png",
          selectedIconPath: "../../images/tab_bar/dbtz-active.png",
          isShow: true,
        },
        {
          index: 1,
          pagePath: "/pages/household/household",
          text: "入戶檢查",
          iconPath: "../../images/tab_bar/rhjc.png",
          selectedIconPath: "../../images/tab_bar/rhjc-active.png",
          isShow: true
        },
        {
          index: 2,
          pagePath: "/pages/phoneback/phoneback",
          text: "電話回訪",
          iconPath: "../../images/tab_bar/callphone.png",
          selectedIconPath: "../../images/tab_bar/callphone-active.png",
          isShow: true
        },
        {
          index: 3,
          pagePath: "/pages/rectification/rectification",
          text: "督促整改",
          iconPath: "../../images/tab_bar/dczg.png",
          selectedIconPath: "../../images/tab_bar/dczg-active.png",
          isShow: true
        },
        {
          index: 4,
          pagePath: "/pages/mine/mine",
          text: "我的",
          iconPath: "../../images/tab_bar/mine.png",
          selectedIconPath: "../../images/tab_bar/mine-active.png",
          isShow: true
        }
      ]
    })

    try { // 剛進頁面時判斷第一個tab
      this.data.list.forEach((item) => {
        if (item.isShow) {
          this.setData({
            active: item.text,
            // title: item.text
          })
          throw ('循環停止')
        }
      })
    } catch (e) {
      console.log(e)
    }

  },
  onChange(event) {
    console.log(event)
    this.setData({
      active: event.detail,
      // title: event.detail
    })
  }
})

3.index(index.json)

{
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "van-nav-bar": "@vant/weapp/nav-bar/index",
    "todo-notice": "../../components/todoNotice/todoNotice",
    "indoor-check": "../../components/indoorCheck/indoorCheck"
  },
  "enablePullDownRefresh": false,
  "navigationStyle": "custom"
}