微信小程序 自定义tabbar 切换bug

1 配置信息
在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

{
  "pages": [
    "pages/index/index",
    "pages/user/index",
    "pages/marketing/index",
    "pages/analyReport/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "backgroundColor": "#D51616",
    "navigationBarBackgroundColor": "#D51616",
    "navigationBarTitleText": "",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/marketing/index",
      "text": "营商直通车"
    },
    {
      "pagePath": "pages/analyReport/index",
      "text": "分析报表"
    }, {
      "pagePath": "pages/user/index",
      "text": "个人中心"
    }]
  },
  "sitemapLocation": "sitemap.json"
}

2 添加 tabBar 代码文件
在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

image.png

3. 编写 tabBar 代码
   custom-tab-bar/index.js

Component({
    data: {
      selected: 0,
      color: "#7A7E83",
      selectedColor: "#D51616",
      list: [{
        pagePath: "../index/index",
        iconPath: "../assets/img/home/decision3.png",
        selectedIconPath: "../assets/img/home/decision1.png",
        text: "首页"
      },
      {
        pagePath: "../marketing/index",
        iconPath: "../assets/img/home/yingxiao.png",
        selectedIconPath: "../assets/img/home/yingxiao1.png",
        text: "营商直通车"
      },
      {
        pagePath: "../analyReport/index",
        iconPath: "../assets/img/home/shuji1.png",
        selectedIconPath: "../assets/img/home/shuji2.png",
        text: "分析报表"
      }, {
        pagePath: "../user/index",
        iconPath: "../assets/img/home/mine1.png",
        selectedIconPath: "../assets/img/home/mine2.png",
        text: "个人中心"
      }]
    },
    attached() {
    },
    methods: {
      switchTab(e) {
        const data = e.currentTarget.dataset
        const url = data.path
        wx.switchTab({url})
        this.setData({
          selected: data.index
        })
      }
    }
  })

index.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

index.wxss

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: white;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .tab-bar-border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
  }
  
  .tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .tab-bar-item cover-image {
    width: 27px;
    height: 27px;
  }
  
  .tab-bar-item cover-view {
    font-size: 10px;
  }
  

关于切换bug
需要在Tab页面加入以下代码

onShow: function () {
    this.getTabBar().setData({
        selected : 3
    })
},

文章参考 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html