微信小程序之选项卡 窗口顶部TabBar页面切换
最近在做小程序相关的开发,用到了类似某宝类似的滑动tabBar实现页面的切换,在网上看到的大多资料鱼龙混杂、模糊不清、有的还不能高度自适应,所以自己实现了一下;
好了:上图
没什么好说的都是对一些基本的组件的应用直接上代码:
1.wxml
<view class='container'>
<view class='orderlength' >
<view class='protab swiper-tab'>
//可以根据自己的需求添加
<view class="swiper-tab-item {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">销售中</view>
<view class="swiper-tab-item {{currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav">审核中</view>
<view class="swiper-tab-item {{currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav">已下架</view>
</view>
<view class='order-itembox'>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
<swiper-item>
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
<view class='order-item' wx:for="{{order}}" wx:for-item="item" wx:key="index" id='{{item.id}}'>
第一个页面的数据
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
<view class='order-item' wx:for="{{order}}" wx:for-item="item" wx:key="index" wx:if="{{item.status==0}}">
第二个页面的数据
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
<view class='order-item' wx:for="{{order}}" wx:for-item="item" wx:key="index" wx:if="{{item.status==1}}">
第三个页面的数据
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
2.wxss
.swiper-box {
width: 100%;
}
.orderlength{width:100%}
.order-itembox {
width: 100%;
}
.swiper-tab {
width: 100%;
display: -webkit-flex;
display: flex;
background: #fff;
}
.swiper-tab .swiper-tab-item {
-webkit-box-flex: 1;
flex: 1;
text-align: center;
line-height: 80rpx;
font-size: 32rpx;
position:relative;
}
.swiper-tab .active {
color: red;
}
.swiper-tab .active::after{
display:block;
content:'';
width:100%;
height:6rpx;
background:red;
position:absolute;
bottom:0;
}
3.js
Page({
onLoad() {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
clientHeight: res.windowHeight
});
}
})
},
data: {
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
order: [],
orderlist: {},
},
bindChange: function(e) {
console.log("滑动切换会触发的事件")
var that = this;
that.setData({
currentTab: e.detail.current
});
},
swichNav: function(e) {
console.log("点击上方选项卡触发的事件")
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
}
})
OK,到此结束,如有不足之处,评论讨论哦、、、、、