mpvue使用微信小程序默认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;
}