微信小程序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) },