微信小程序中选项卡的应用随处可见，本篇文章就来给大家介绍微信小程序中选项卡的实现。
思路
之前写过基于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
});
},一个漂亮的选项卡就完成了。完整案例
以上就是本篇文章的全部内容了，更多精彩请关注php中文网。
