当前位置 博文首页 > 盛夏温暖流年：微信小程序之 swiper 的 tab 选项卡高度自适应问
在开发微信小程序时，发现 swiper 的 tab 选项卡高度默认为 150px，不能做到自适应，如果tab页面的内容较多，就会出现无法完全显示的问题。
本 demo 包含两个 tab，详情页面和列表页面，主要解决文本长度不定的情况和列表个数不定的情况：
1. 详情页面：文本描述字数不定的情况
从后端请求文本内容完成内容填充后，获取被填充元素的高度，和页面其他内容不变的元素高度相加，即可得出页面总高度。
2. 列表页面：列表项高度固定，个数不定的情况
已知列表项高度itemHeight，请求到动态数据后，使用 itemHeight * 数据个数，即可计算出页面总高度。
wxml：
<view class="page">
<view>
<view wx:for="{{navTab}}" wx:key="index" data-idx="{{index}}" bindtap="currentTab" class="{{currentTab==index ? 'cur' : ''}}">
<text>{{item}}</text>
</view>
</view>
<swiper style="height: {{clientHeight?clientHeight+'px':'auto'}}" current="{{currentTab}}" class="swiper-box" bindchange="bindChange">
<swiper-item>
<view>
<view id="frame">介绍:{{description}}</view>
</view>
</swiper-item>
<swiper-item>
<block wx:for="{{list}}" wx:for-item="item">
<view>{{item.name}}</view>
</block>
</swiper-item>
</swiper>
</view>
js：
Page({
/**
* 页面的初始数据
*/
data: {
description: "",
list: [],
navTab: ['tab1', 'tab2'],
currentTab: 0,
defaultHeight: '420',
clientHeight: '420',
itemHeight: 137
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getDetail();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 获取详情
*/
getDetail() {
if (this.data.currentTab == 0) {
// 实际场景下，description应该是请求获取到的文本内容
this.setData({
description: "这里是自定义的描述"
});
// 必须等内容填充后再设置高度
this.setDetailHeight();
} else {
this.setData({
list: []
});
// 获取列表
this.getList();
}
},
/**
* 切换tab
*/
currentTab: function (e) {
if (this.data.currentTab == e.currentTarget.dataset.idx) {
return;
}
this.setData({
currentTab: e.currentTarget.dataset.idx,
list: []
})
// 如果是列表页面
if (this.data.currentTab == 1) {
this.getList();
// 使用每一个list中的item的高度*列表中item的项数来计算高度
this.setData({
clientHeight: this.data.list.length > 1 ? this.data.list.length * this.data.itemHeight : "150"
})
} else {
this.getDetail();
}
},
bindChange: function (e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
/**
* 获取列表
*/
getList: function () {
let list = [
{
name:"test1"
},
{
name:"test2"
},
{
name:"test3"
},
{
name:"test4"
},
{
name:"test5"
}
];
this.setData({
list: list,
clientHeight: list.length * this.data.itemHeight == 0 ? "150" : list.length * this.data.itemHeight
})
},
/**
* 设置详情页高度
*/
setDetailHeight: function () {
let query = wx.createSelectorQuery();
// 动态计算高度，文本的高度 + 默认的页面高度
query.select('#frame').boundingClientRect(rect => {
let height = rect.height;
console.log("文本高度：" + height + ",默认高度：" + this.data.defaultHeight);
this.setData({
clientHeight: height + this.data.defaultHeight
})
}).exec();
}
})
wxss:
.cur {
border-bottom: 5rpx solid #3668ff;
color: #000;
}
微信小程序 自定义组件和父子组件的传参
微信小程序之实现隔行变色表格
微信小程序之文件和图片的上传
微信小程序登录流程（自定义账号绑定功能）
微信小程序之 如何添加背景图片 & 包大小超限解决方案
cs