微信小程序选项卡swiper默认高度150px（让高度实现自适应）怎么解决?

心已赠人 2022-03-19 13:52 1318阅读 0赞

首先：个人感觉这是小程序的一个bug（相信以后会修复的），默认高度是150px,而且不能通过css控制让高度自适应(就是给高一个auto,在这里不起作用！！！)，百度了好多方法，觉得有用的是给swiper加个固定高100vh（数据有限可以用一下）,但这治标不治本啊，如果有好多数据（不如百十条）那么超过100vh高度之后的就不显示了，

## 正题 ：首先讲一下，我的逻辑思路 ##

在swiper标签下有一个标签，我们需要获取到子标签的高度（也就是view标签的高度），然后把这个高度\*（乘以）循环数组的个数，把这个高度赋值给swiper,这样不管循环多少个数据，都能展示出来，我就是通过这种方法来实现swiper自适应效果的。

## 下面给一个效果图和代码片段 ##

我没这样做之前两个数据都不能显示全(也就是下面这张图第二组李四循环都不能展示全)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]  
加了之后18条都可以显示全（证明还是有用的！！！）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]  
test.js  
js中实现的关键函数：onLoad swiperTab

test.wxml  
wxml中关键代码把计算的高给swiper （style='height:\{ \{widHeight\}\}）

<view class="swiper-tab">
      <view class="swiper-tab-item {
       {currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一级成员</view>
      <view class="swiper-tab-item {
       {currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二级成员</view>
    </view>
    <swiper class='swi'  current="{
       {currentTab}}" style='height:{
       {widHeight}}' duration="300" bindchange="swiperTab">
      <swiper-item>
        <view class='main' wx:for="{
       {zhangsan}}">
            <view class='main-top'>
              <image src='{
       {item.touxiang}}'></image>
            </view>
            <view class='main-middle'> 
              <view class='middle-top'>
              {
       {item.zhangsan}}
              </view>
              <view class='middle-zhong'>
              {
       {item.time}}
              </view>
              <view class='middle-bottom'>
                {
       {item.ren}}
              </view>
            </view>
            <view class='main-right'>
              <image src='{
       {item.zhitui}}'></image>
            </view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class='main' wx:for="{
       {lisi}}">
            <view class='main-top'>
              <image src='{
       {item.touxiang}}'></image>
            </view>
            <view class='main-middle'> 
              <view class='middle-top'>
              {
       {item.zhangsan}}
              </view>
              <view class='middle-zhong'>
              {
       {item.time}}
              </view>
              <view class='middle-bottom'>
                {
       {item.ren}}
              </view>
            </view>
            <view class='main-right'>
              <image src='{
       {item.zhitui}}'></image>
            </view>
        </view>
      </swiper-item>
    </swiper>

test.wxss

/* 选项卡 */
    
    .swiper-tab {
      width: 100%;
      /* border-bottom: 2rpx solid #ccc; */
      text-align: center;
      height: 130rpx;
      line-height: 88rpx;
      font-weight: bold;
    }
    
    .swiper-tab-item {
      display: inline-block;
      width: 160rpx;
      height: 60rpx;
      border-radius: 10rpx;
      background: #ccc;
      margin: 35rpx 10rpx;
      line-height: 60rpx;
    }
    
    .active {
      color: white;
      width: 160rpx;
      height: 70rpx;
      background: white;
      border-radius: 10rpx;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAiBAMAAAA61UNUAAAAJFBMVEUAAABYm/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9m89iCAAAAC3RSTlMA5oBKSRfTv6mPB8U+K6cAAABESURBVDjLY3DcTRQQYZAmTuFGht1EglGFowpHFY5khUQXKYbEKRRmwATau3dvC2AgAjDt3l3KQBTQ3rGAOIVME7AIAgCbgW/AGyyKMgAAAABJRU5ErkJggg==);
      background-size: 100% 100%;
    }
    
    /* 成员 */
    
    .swi {
      width: 100%;
      /* height: 100vh !important; */
    
    }
    
    .main {
      height: 180rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #ccc;
      margin: 0 25rpx;
    }
    
    .main-top {
      height: 100rpx;
      width: 100rpx;
      padding: 0 50rpx 0 10rpx;
    }
    
    .main-top image {
      height: 100rpx;
      width: 100rpx;
    }
    
    .main-right {
      width: 70rpx;
      height: 30rpx;
    }
    
    .main-right image {
      width: 70rpx;
      height: 30rpx;
    }
    
    .main-middle {
      width: 470rpx;
    }
    
    .middle-top {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 25rpx;
    }
    
    .middle-zhong {
      font-size: 25rpx;
      color: #b0b0b0;
      margin-bottom: 10rpx;
    }
    
    .middle-bottom {
      font-size: 25rpx;
      color: #b0b0b0;
    }
    
    .main-right {
      margin-bottom: 105rpx;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]: /images/20220319/6343e2eb8baf4c11b23420738eda3ff0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]: /images/20220319/3f4eec64fc4b427e8d1872af5e343466.png