小程序自定义tabbar

下载好weui.wxss

index.wxml

<view class="weui-navbar navbar">
    <view id="{{index}}" class="navbar-title" bindtap="tabClick" wx:for="{{tabs}}" wx:key="id">
      <view class="{{activeIndex == index ? 'weui-bar-item_on' : ''}} title" style='font-size:28rpx;'>{{item}}</view>
    </view>
</view>
复制代码

index.wxss

.navbar{
  border-bottom:1rpx  #EBEBEB solid;
  position:relative;
  font-size:28rpx;
}
.navbar-title{
  width: 188rpx; 
  display: inline-block;
  text-align: center;
  height: 73rpx;
  line-height: 73rpx;
  font-size: 28rpx;
}
.weui-bar-item_on{
  color: #6F48C5;
  font-size:28rpx;
  line-height: 73rpx;
  border-bottom: 6rpx  #6F48C5 solid;
}
.title{
  width: 100rpx;
  margin: auto;
}
复制代码

index.js

tabClick: function(e) {
    let that = this;
    that.setData({
      activeIndex: e.currentTarget.id,
      state: e.currentTarget.id
    });
}
复制代码