只有最简单的切换。不支持左右滑动效果。代码量少。用户体验一般
index.wmxl
<!--导航条-->
<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
<!--111-->
<view hidden="{{currentTab!==0}}">
111
</view>
<!--222-->
<view hidden="{{currentTab!==1}}">
222
</view>
<!--333-->
<view hidden="{{currentTab!==2}}">
333
</view>
index.wxss
page{
display: flex;
flex-direction: column;
height: 100%;
}
.navbar{
flex: none;
display: flex;
background: #fff;
}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
}
.navbar .item.active{
color: red;
}
.navbar .item.active:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
background: red;
}
index.js
var app = getApp()
Page({
data: {
navbar: ['111', '222', '333'],
currentTab: 0
},
navbarTap: function (e) {
this.setData({
currentTab: e.currentTarget.dataset.idx
})
}
})
支持左右滑动和切换。代码量稍微多一点。用户体验较好
index.wxml
<!-- tab3次切换 -->
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">点菜</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">商家</view>
<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">筛选</view>
</view>
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" class='swiper-d'>
<swiper-item>
<text>1111</text>
</swiper-item>
<swiper-item>
<text>1211</text>
</swiper-item>
<swiper-item>
<text>131</text>
</swiper-item>
</swiper>
index.js
Page({
data: {
},
// tab切换开始
swiperTab: function (e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
}
// tab切换结束
})
index.wxss
swiper{
/* height: 1122rpx; */
height:calc(100% - 330rpx);
}
.swiper-tab{
width: 100%;
/* border-bottom: 2rpx solid #ccc; */
text-align: center;
height: 88rpx;
line-height: 88rpx;
display: flex;
flex-flow: row;
background-color: #DF142E;
color: white;
}
.swiper-tab-item{
width: 22%;
color:#000000;
margin-left: 65rpx;
font-size: 32rpx;
color: white;
}
.active{
/* color:#d70615; */
border-bottom: 1rpx solid white;
margin-bottom: 8rpx;
} ```
这里面涉及了calc的概念。height:calc(100% - xxrpx);效果是动态计算高度,swiper不能把高度固定死。不然会出现很多问题。后期数据循环的时候会出现数据展示不全的情况。