微信小程序之 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;
}

其他微信小程序相关博客：

微信小程序自定义组件和父子组件的传参

微信小程序之实现隔行变色表格

微信小程序之文件和图片的上传

微信小程序登录流程（自定义账号绑定功能）

微信小程序之如何添加背景图片 & 包大小超限解决方案

微信小程序之 swiper 的 tab 选项卡高度自适应问题解决方案相关推荐

swiper高度自适应_微信小程序之swiper轮播图片高度自适应
微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应. 效果图: swiper ...
微信小程序图片实现宽度100%，高度自适应
图片样式设置宽度100%,然后设置高度自适应 .img{width: 100%; } 然后标签内增加属性 mode="widthFix" <image class=&quo ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序利用swiper+scroll-view实现Tab切换
微信小程序利用swiper+scroll-view实现Tab切换先放一张效果图需要实现的功能逻辑: 1.当用户点击tab的时候,tab样式发生改变,并且下方对应的展示内容也发生改变. 2.当用户滑 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
微信小程序设置swiper圆角在ios上失效解决
今天在给轮播图添加圆角的时候,发现在安卓机上是有圆角的,但是在苹果手机上圆角却失效了,后来翻阅了文档发现这是个bug.下面是两种解决方案:第一种:-webkit-backface-visibility ...
微信小程序点击切换tab跟随动画
微信小程序点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...

微信小程序之 swiper 的 tab 选项卡高度自适应问题解决方案

其他微信小程序相关博客：

微信小程序之 swiper 的 tab 选项卡高度自适应问题解决方案相关推荐

最新文章

热门文章