来说个老生常谈的问题 选项卡

选项卡这个东西 怎么说 找个插件随便就加上了 但是插件的东西 真的不好改样式 改死人

干脆自己写一个得了

<view class="wrap">
	<view class="tab {{index == active ? 'active' : ''}}" wx:for="{{tab}}" wx:key="index" data-index="{{index}}" bindtap="checkItem">
		{{item.name}}
	</view>
</view>

<view wx:if="{{active == 0}}">1</view>
<view wx:if="{{active == 1}}">2</view>
<view wx:if="{{active == 2}}">3</view>

 

data: {
    active: 0,
}

 checkItem(e) {
    this.setData({
      active: e.currentTarget.dataset.index
    })
  },

.wrap{
  width: 100%;
  height: 80rpx;
  padding:0 40rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-bottom: 24rpx;
}
.tab{
  height: 80rpx;
  background-color: #fff;
  display: inline-block;
  text-align: center;
  line-height: 80rpx;
  position: relative;  
}
.active::before{
  content: '';
  display: inline-block;
  width: 30rpx;
  height: 6rpx;
  border-radius: 5rpx;
  background-color:#3469F1;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.active{
  font-weight: 700;
  color: #3469F1;
}
.tab:nth-child(1){
  text-align: left;
}
.tab:nth-child(3){
  text-align: right;

}

原理还是比较简单 通过动态绑定index  然后下面的div通过active来判断是否显示    我的css写的还是有点东西的 感兴趣的可以看看