微信小程序tab选项卡,支持点击切换、左右滑动切换
效果图
tab-02.wxml
<view style="padding:50px;background:#dfdfdf;text-align:center;"> 头部内容 </view> <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' style="height:{{swiperHeight}}px"> <swiper-item> <view class="swiper-view-0"> 内容 </view> </swiper-item> <swiper-item> <view class="swiper-view-1"> 直播 </view> </swiper-item> <swiper-item> <view class="swiper-view-2"> 资料 </view> </swiper-item> <swiper-item> <view class="swiper-view-3"> 留言 </view> </swiper-item> <swiper-item> <view class="swiper-view-4"> 总结 </view> </swiper-item> </swiper> <!--切换内容部分end--> </view> <view style="padding:50px;background:#dfdfdf;text-align:center;"> 底部内容 </view>
tab-02.js
Page({ /** * 页面的初始数据 */ data: { currentTab: 0, swiperHeight: 200 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setSwiperHeight() }, //以下为tab事件 setSwiperHeight: function () { let that = this // 创建节点选择器 let query = wx.createSelectorQuery(); query.select('.swiper-view-' + that.data.currentTab).boundingClientRect((rect) => { let rectHeight = rect.height; // 获取高度 that.setData({ swiperHeight: rectHeight > 200 ? rectHeight : 200 }) console.log(JSON.stringify(rect)) }) query.exec() }, //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 }); } this.setSwiperHeight() }, //滑动swiper切换,让swiper当前滑块的current的index与tab头部index一一对应 tabChange(e) { this.setData({ currentTab: e.detail.current }) this.setSwiperHeight() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
tab-02.wxss
page { height: auto; } /* .tab-swiper { position: fixed; width: 100%; height: 100%; top: 0; box-sizing: border-box; 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/102538343
来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。