微信小程序tab选项卡，支持点击切换、左右滑动切换
效果图
tab-01.wxml
<view class="tab-content">
<!--头部tab切换部分start-->
<view class="tab-menu">
<view class="{{currentTab==0?'tab-menu-select':'default'}}" data-current="0" catchtap="switchNav">
内容
</view>
<view class="{{currentTab==1?'tab-menu-select':'default'}}" data-current="1" catchtap="switchNav">
直播
</view>
<view class="{{currentTab==2?'tab-menu-select':'default'}}" data-current="2" catchtap="switchNav">
资料
</view>
<view class="{{currentTab==3?'tab-menu-select':'default'}}" data-current="3" catchtap="switchNav">
留言
</view>
<view class="{{currentTab==4?'tab-menu-select':'default'}}" data-current="4" catchtap="switchNav">
总结
</view>
</view>
<swiper current='{{currentTab}}' bindchange="tabChange" class='tab-swiper'>
<block>
<swiper-item>
<block>
内容
</block>
</swiper-item>
<swiper-item>
<block>
直播
</block>
</swiper-item>
<swiper-item>
<block>
资料
</block>
</swiper-item>
<swiper-item>
<block>
留言
</block>
</swiper-item>
<swiper-item>
<block>
总结
</block>
</swiper-item>
</block>
</swiper>
<!--切换内容部分end-->
</view>
tab-01.js
Page({
/**
* 页面的初始数据
*/
data: {
currentTab: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//tab切换函数，让swiper当前滑块的current的index与tab头部index一一对应
switchNav: function (e) {
var index = e.target.dataset.current;
if (this.data.currentTab == index) {
return false;
} else {
this.setData({
currentTab: index
});
}
},
//滑动swiper切换，让swiper当前滑块的current的index与tab头部index一一对应
tabChange(e) {
this.setData({
currentTab: e.detail.current
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})tab-01.wxss
page {
height: auto;
}
.tab-swiper {
position: fixed;
width: 100%;
height: 100%;
top: 0;
box-sizing: border-box;
/* padding: 170rpx 0rpx 0rpx 0rpx; */
padding: 92rpx 0rpx 0rpx 0rpx;
z-index: -1;
}
.tab-swiper swiper-item {
overflow-y: scroll;
}
.tab-content {
background-color: #fff;
}
.tab-menu {
width: 100%;
display: flex;
box-sizing: border-box;
border-bottom: 1px solid #f2f2f2;
z-index: 11;
}
.tab-menu view {
margin: 0rpx auto;
height: 88rpx;
line-height: 88rpx;
font-size: 28rpx;
color: #434343;
}
.tab-menu .tab-menu-select {
position: relative;
}
.tab-menu .tab-menu-select:after {
position: absolute;
left: -7rpx;
bottom: 0rpx;
content: "";
width: 70rpx;
height: 8rpx;
background-color: rgb(235, 21, 60);
border-radius: 4px 4px 0 0;
}
