在开发微信小程序时,发现 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;
}
其他微信小程序相关博客:
欢迎关注我的公众号,用讲故事的方式学技术。
这里有脑洞大开的奇葩故事,也有温暖文艺的心灵感悟。
技术知识,也可以很有趣。