微信小程序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; }
作者:China_Lzw
链接:https://blog.csdn.net/qq285679784/article/details/102534633
来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。