微信小程序tab切换

1.html布局

<view class='title'>
    <view class="{{0 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='0'>
        <text>直播</text>
        <hr class="line-style" />
    </view>
    <view class="{{1 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='1'>
        <text>回放</text>
        <hr class="line-style" />
    </view>
</view>

　　

2.相关css

page{
    background:#fff;
}
.title {
    width: 100%;
    height: 88rpx;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 2rpx solid rgba(235,235,235,1);
}
.title text{
    line-height: 82rpx;
} 
.title-sel {
  color: #24272c;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
 height: 88rpx;
}
 
.title-sel  .line-style{
  /* background: #fff; */
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}
 
.title-sel-selected{
  color: #006bff;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
 height: 88rpx;
}
.title-sel-selected .line-style{
  background: #006bff;
  height: 6rpx;
  width: 56rpx;
  position: relative;
  border-radius:4rpx;
  /* margin-top: 1rpx; */
}

　　

3.相关js

data: {
        currentIndex: 0,
    },
 titleClick: function (e) {
        let currentPageIndex =
            this.setData({
                //拿到当前索引并动态改变
                currentIndex: e.currentTarget.dataset.idx,
                zblist: [],
                inputValue: '',//清空搜索框
                page: 1
            })
        console.log(e.currentTarget.dataset.idx)
    },