小程序自定义tabbar

官方示例 tabbar，可在开发者工具中预览效果
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

image.png

image.png

index.wxml:

<!-- 我是这么写的，根据官方改的 -->
<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <text class="dot" wx:if="{{item.isShow != null && item.isShow == true}}">2</text>
    <image class='cover-image' src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view style="color: {{selected === index ? selectedColor : color}}" class="tab-bar-item-text">{{item.text}}</view>
  </view>
</view>

index.wxss:

.tab-bar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 120rpx;
  background: white;
  display: flex;
  flex-direction: row;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: #e4e4e4;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 1px;
}

.tab-bar-item {
  position: relative;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 20rpx;
}

.cover-image {
  width: 56rpx;
  height: 56rpx;
}

.tab-bar-item .tab-bar-item-text {
  font-size: 20rpx;
  margin-top: 8rpx;
}

.dot{
  position: absolute;
  right: 54rpx;
  background: #ff3c41;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  top: 10rpx;
  text-align: center;
  line-height: 36rpx;
  font-size: 20rpx;
  color: #fff;
}

index.js:

Component({
  data: {
    selected: 0,
    color: "#7F8699",
    selectedColor: "#FB7E00",
    list: [{
      "pagePath": "pages/index/index",
      "text": "拍卖大厅",
      "iconPath": "/img/home.png",
      "selectedIconPath": "/img/home_act.png"
    },
    {
      "pagePath": "pages/orderBid/orderBid",
      "text": "我已出价",
      "iconPath": "/img/bid.png",
      "selectedIconPath": "/img/bid_act.png"
    },
    {
      "pagePath": "pages/todoList/todoList",
      "text": "待办",
      "iconPath": "/img/daiban.png",
      "selectedIconPath": "/img/daiban_act.png",
      "isShow": true
    },
    {
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "/img/my.png",
      "selectedIconPath": "/img/my_act.png"
    }],
  },
  attached() {},
  methods: {
    switchTab(e) {
      const dataset = e.currentTarget.dataset
      const path = dataset.path
      const index = dataset.index
      //正常的tabbar切换界面
      //如果是特殊跳转界面,自行判断
      // if (this.data.list[index].isShow) {
      //   wx.navigateTo({
      //     url: path
      //   })
      // }
      wx.switchTab({
        url: '/'+path
      })
      this.setData({
        selected: index
      })
      
    }
  }
})

接下来对应的tab页面,设置对应的选中项就完成了

image.png

  if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      console.log('设置选中项 2')
      this.getTabBar().setData({
        selected: 2
      })
   }

希望能帮到小伙伴，写的不好请多多指教～～～