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

最新推荐文章于 2020-12-18 18:33:01 发布

盛夏温暖流年

最新推荐文章于 2020-12-18 18:33:01 发布

阅读量1.6k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序 swiper 高度自适应选项卡

本文链接：https://blog.csdn.net/j1231230/article/details/110289694

版权

在微信小程序开发中遇到swiper选项卡高度默认不自适应问题，本文提供了解决方案。针对详情页文本长度不定和列表页列表个数不定的情况，分别通过计算内容高度和列表项高度来动态调整页面总高度，确保内容完整显示。

摘要由CSDN通过智能技术生成

在开发微信小程序时，发现 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="