微信小程序中选项卡的实现方法

微信小程序中选项卡的应用随处可见，本篇文章就来给大家介绍微信小程序中选项卡的实现。思路之前写过基于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>内容显示区使用swiper组件，swiper-item个数要与tabs数组长度 一致<!-- 内容开始 --><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.lengthfor (let i = lens; i < lens+30; i++) {list.push(i)}this.setData({list: list});},一个漂亮的选项卡就完成了。完整案例

以上就是本篇文章的全部内容了，更多精彩请关注小潘博客。以上就是微信小程序中选项卡的实现方法的详细内容，更多请关注小潘博客其它相关文章！