wxml：页面
<view class="gird">
<view wx:key="id" wx:for="{{items}}" wx:for-item="val" wx:for-index="key" class="gird_w swiper-tab-list {{currentTab==key ? 'on' : ''}}" data-current="{{key}}" bindtap="swichNav">{{val}} </view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<swiper-item>
<view>
<view class="gird">
<view wx:key="id1" wx:for="{{arr}}" wx:for-item="val1" wx:for-index="key1" class="gird_w swiper-tab-list {{tab==key1 ? 'on' : ''}}" data-tab="{{key1}}" bindtap="swichNav1">{{val1}} </view>
</view>
<swiper current="{{tab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<swiper-item>
<view>金融11</view>
</swiper-item>
<swiper-item>
<view>理财22</view>
</swiper-item>
<swiper-item>
<view>理财33</view>
</swiper-item>
</swiper>
</view>
</swiper-item>
<swiper-item>
<view>金融</view>
</swiper-item>
<swiper-item>
<view>理财</view>
</swiper-item>
</swiper>
js逻辑页面
data: {
items:["酒店" , "景点","定制旅游"],
arr:["国内" , "钟点房","特卖"]
},
// tab切换逻辑
swichNav: function( e ) {
var that = this;
if( this.data.currentTab === e.target.dataset.current ) {
return false;
} else {
that.setData( {
currentTab: e.target.dataset.current
})
}
},
swichNav1: function( e ) {
var that = this;
if( this.data.tab === e.target.dataset.tab ) {
return false;
} else {
that.setData( {
tab: e.target.dataset.tab
})
}
},
css
.gird_w{
width: 33%;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-tab-list{
font-size: 30rpx;
display: inline-block;
width: 33.33%;
color: #1C2636;
}
.on{
color: #1C2636;
border-bottom: 3rpx solid #1C2636;
font-size: 40rpx;
font-weight: 600;
}
.swiper-box{
display: block;
height: 2000rpx;
width: 100%;
overflow: hidden;
margin: 20rpx 0 0 0;
}
