思路之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件
小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过wx.getsysteminfosync获取设备高度设置swiper高度
小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件scroll-view。
小程序中的swiper组件功能还是比较有限的，有待优化。
方案1.首先在js中设置数据 data: { tabs: ['菜单一', '菜单二'],// 导航菜单栏 curidx:0,// 当前导航索引 scrollheight:0, //滚动高度 = 设备可视区高度 - 导航栏高度 list:[],// 内容区列表 },
在onload函数中填充数据
/** * 生命周期函数--监听页面加载 */ onload: function (options) { let list=[]; for (let i=1;i<=30;i++){ list.push(i) } this.setdata({ list: list }); },
2.在wxml中循环渲染出导航<!-- 导航栏开始 --><view class="swiper-tab"> <view wx:for="{{tabs}}" wx:key class="swiper-tab-item {{curidx==index?'swiper-active':''}}" data-current="{{index}}" catchtap="clicktab"> <text>{{item}}</text> </view></view>
3.设置当前活动导航样式/*初始化样式*/view, text, picker, input, button, image{ display: flex; box-sizing: border-box;}/* 导航样式*/.swiper-tab { position: relative; width: 100%; height: 100rpx; justify-content: center; align-items: center;}.swiper-tab-item { background-color: #f3f3f3; width: 50%; height: 80rpx; justify-content: center; align-items: center;}.swiper-active{ background-color: rgb(129, 190, 247); color: #fff;}
4.内容显示区内容显示区使用swiper组件，swiper-item个数要与tabs数组长度 一致
<!-- 内容开始 --><swiper class="swiper_content" current="{{curidx}}" bindchange="swipertab" style='height:{{scrollheight}}px'> <swiper-item> <scroll-view class="scroll-y" scroll-y style='height:{{scrollheight}}px' bindscrolltolower="onreachbottom"> <view wx:for="{{list}}" wx:key> <text> 内容一{{item}}</text> </view> </scroll-view> </swiper-item> <swiper-item> 内容二 </swiper-item></swiper>
小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过[wx.getsysteminfosync][4]获取设备高度设置swiper高度
小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件[scroll-view][5]。
我们在onshow函数中通过getsysteminfosync获取设备的宽高来设置swiper组件高度以及scroll-view高度
onshow: function () { // 100为导航栏swiper-tab 的高度 this.setdata({ scrollheight: wx.getsysteminfosync().windowheight - (wx.getsysteminfosync().windowwidth / 750 * 100), }) },
5.点击导航栏切换内容 //点击切换 clicktab: function (e) { this.setdata({ curidx: e.currenttarget.dataset.current }) },
6.滑动内容切换导航栏 //滑动切换 swipertab: function (e) { this.setdata({ curidx: e.detail.current }); },
7.可滚动区域滚动最底刷新数据 /** * 页面上拉触底事件的处理函数 */ onreachbottom: function () { // 更新列表 let list = this.data.list; console.log(list) let lens = list.length for (let i = lens; i < lens+30; i++) { list.push(i) } this.setdata({ list: list }); },
一个漂亮的选项卡就完成了。完整案例
以上就是本篇文章的全部内容了，更多精彩请关注。
以上就是微信小程序中选项卡的实现方法的详细内容。