mpvue WeChatウィジェットを使用したデフォルトtabBar

mpvueプロジェクトmain.jsファイルで次のように構成します.

export default {
  //       app.json
  config: {
    pages: [],
    window: {
      "navigationBarTitleText": "  ",
      "navigationBarTextStyle": "white",
      "navigationBarBackgroundColor": "#ec5045",
      "onReachBottomDistance": 0,
      "backgroundTextStyle": "light"
    },
    tabBar: {
      "color": "#202020",
      "selectedColor": "#ec5045",
      "list": [{
        pagePath: "pages/index",
        text: "  ",
        iconPath: "/static/img/order_0.png",
        selectedIconPath: "/static/img/order_2.png",
      }, {
        pagePath: "pages/mine",
        text: "  ",
        iconPath: "/static/img/news_9.png",
        selectedIconPath: "/static/img/news_5.png",
      }]
    },
  }
}

 
main.jsは実は原生の微信ウィジェットが開発したプロジェクトのプロファイルapp.jsonで、わずかな修正をすれば正常に使用でき、自分でカスタマイズするより多くの手間を省くことができます.
しかし、このtabBarはトップページにtabがある場合にのみ適しており、ショッピングモールクラスに適しており、繰り返し使用することはできません.繰り返し使用するには、自分でtabをカスタマイズする必要があります.
以下は私が自分で書いたよく使うtabです.これは簡単で、繰り返し使用できます.スタイルを選んで勝手に修正することができます.tabの分類が多すぎると、スクロールの形式にすることができます.

    
        
            {{item.name}}
        
    

// pages/msg/msg.js
Page({

    /**
     *        
     */
    data: {
        nav: [{
            name: '    '
        }, {
            name: '    '
        }],
        currentTab: 0
    },

    swichNav: function (e) {
        var that = this;
        var cur = e.target.dataset.current;
        if (this.data.currentTab == cur) {
            return false;
        } else {
            this.setData({
                currentTab: cur,
            })
        }
    },

})

.tab-h{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    border-bottom: 1px solid #dddddd;
    font-size: 32rpx;
    background: #ffffff;
}
.tab-item{
    width: 50%;
    text-align: center;
    position: relative;
}
.tab-h .active:after{
    content: "";
    display: block;
    height: 8rpx;
    width: 100%;
    background:#4c84ff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}