wxml代码:
<view id='tabs'>
<view class='tabs-box'>
<block wx:for="{{['待收货','待取货','已完成','已关闭']}}" wx:key="index">
<view class="tabs-item {{currentTabIndex == index ? 'selected' : '' }}" bindtap='onTabsItemTap' data-index='{{index}}'>
{{item}}
</view>
</block>
</view>
<view class='ordert-detail'>
<view hidden='{{currentTabIndex != 0}}'>页面1</view>
<view hidden='{{currentTabIndex != 1}}'>页面2</view>
<view hidden='{{currentTabIndex != 2}}'>页面3</view>
<view hidden='{{currentTabIndex != 3}}'>页面4</view>
</view>
</view>
wxss代码:
#tabs{
font-size: 28rpx;
}
.tabs-box{
display:flex;
align-items:center;
justify-content:center;
height: 80rpx;
line-height: 80rpx;
text-align: center
}
.tabs-item.selected {
color:#874b27;
border-bottom:2rpx solid #874b27;
}
.tabs-item {
width: 33.3%;
color:#666;
border-bottom:1rpx solid #e9e9e9;
}
js代码:
Page({
/**
* 页面的初始数据
*/
data: {
currentTabIndex:0
},
onTabsItemTap:function(event){
let index=event.currentTarget.dataset.index;
this.setData({
currentTabIndex:index
})
}
})
页面效果: