微信小程序-自定义tabBar组件

需求：小程序底部导航栏上的按钮数量和内容要根据后台返回的数据进行配置显示。

方案：有了上面的需求，小程序原生的tabBar就不能满足了（目前是这样），so,做了下面这个demo。

缺点：点击底部按钮的时候在模拟器上页面会闪，真机上正常；效率相比于原生的会差一点，但是体验上基本感觉不出来。其他的等项目做完再说吧😝略略略~

customTarbar.gif

customTarbar.js

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  properties: {
    itemArray:{
      type:Array,
      value:[]
    },
    selectIndex:{
      type: String,
      value:'0'
    }
  },

  /**
   * 私有数据,组件的初始数据
   * 可用于模版渲染
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    _clickItem:function(e){
      console.log(e)
      wx.redirectTo({
        url: e.currentTarget.dataset.content.pagePath + '?selectIndex=' + e.currentTarget.id,
      })
    }
  }
})

customTarbar.json

{
  "component": true,
  "usingComponents": {}
}

customTarbar.wxml

<view class='tabBarView'>
  <view class='itemView' wx:for='{{itemArray}}' wx:key='' id='{{index}}' catchtap='_clickItem' data-content='{{item}}'>
    <view>
      <image src='' class='iconImage'></image>
      <view wx:if='{{index==selectIndex}}' class="textView textColor">{{item.text}}</view>
      <view wx:else class="textView">{{item.text}}</view>
    </view>
  </view>
</view>

customTarbar.wxss

.tabBarView {
  width: 100%;
  height: 98rpx;
  background-color: white;
  position: fixed;
  bottom: 0;
  overflow: hidden;
  display: flex;
}

.itemView {
  height: 98rpx;
  background-color: white;
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.iconImage {
  width: 48rpx;
  height: 48rpx;
  background-color: lightgray;
  margin-top: 10rpx;
  margin-bottom: 5rpx;
  display:block;
}

.textView {
  height: 30rpx;
  line-height: 30rpx;
  font-size: 20rpx;
  text-align: center;
}

.textColor{
  color: red;
}