小程序tab页面切换
小雅雅家的小凯凯吖 人气:0.wxml
<view class='title'> <view class='titleSel' bindtap='titleClick' data-idx='0'> <text>待接收(0)</text> <hr class="{{0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" /> </view> <view class='titleSel' bindtap='titleClick' data-idx='1'> <text>处理中(1)</text> <hr class="{{1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " /> </view> <view class='titleSel' bindtap='titleClick' data-idx='2'> <text>已完成(1)</text> <hr class="{{2 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " /> </view> </view> <!--内容布局--> <view class="colors"> <view class="colors1" wx:if="{{currentIndex==0}}"> {{currentIndex}} </view> <view class="colors2" wx:if="{{currentIndex==1}}"> {{currentIndex}} </view> <view class="colors3" wx:if="{{currentIndex==2}}"> {{currentIndex}} </view> </view>
.wxss
page{ width: 100%; height: 100%; } .container { height: 100%; min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } .title { width: 100%; height: 88rpx; background: white; display: flex; align-items: center; justify-content: space-around; } .titleSel { width: 33%; color: #5f6fee; font-size: 32rpx; display: flex; flex-direction: column; align-items: center; } .titleUnsel { color: #858fab; font-size: #858fab; } .headerLineSel { background: #5f6fee; height: 6rpx; width: 40rpx; position: relative; margin-top: 10rpx; } .headerLineUnsel { background: #fff; height: 6rpx; width: 40rpx; position: relative; margin-top: 10rpx; } .colors{ width: 100%; height: 100%; } .colors1{ width: 100%; height: 100%; background-color: royalblue; } .colors2{ width: 100%; height: 100%; background-color: salmon; } .colors3{ width: 100%; height: 100%; background-color: seagreen; }
.js
data: { currentIndex: 0, }, //用户点击tab时调用 titleClick: function (e) { let currentPageIndex = this.setData({ //拿到当前索引并动态改变 currentIndex: e.currentTarget.dataset.idx }) console.log(e.currentTarget.dataset.idx) },
加载全部内容