微信小程序解决swiper组件高度问题（可实现不同tab栏，swiper组件不同高度）

怼烎@ 2021-08-30 16:22 638阅读 0赞

![format_png][]

## 前言 ##

我们经常会使用微信小程序自带的tab组件与swiper组件搭配来实现漂亮的tab切换页面，但是我们不得不承认swiper组件默认高度的确是很让我们头疼。那么下面我们来实现上图中根据不同的tab页面来使swiper页面动态的变换高度。

## 干货 ##

**wxml**

<view class="container">
        <view class="tab-body" hover-class="none" hover-stop-propagation="false">
        <view class="tab"> 
              <text class=" { {currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav">Tab1</text>
              <text class=" { {currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav">Tab2 </text>
              <text class=" { {currentTab==2 ? 'select' : ''}}" data-current="2" bindtap="swichNav">Tab3 </text>
        </view>
        </view>
      <swiper current="{ {currentTab}}" bindchange="bindChange" class='swp' style="height:{ { swiperViewHeight}}px">
    	<swiper-item>
            <view class="v1">
            <view class="box"></view>
            <view class="box2"></view>
            </view>
          </swiper-item>
    	<swiper-item>
            <view class="v2">
            <view class="box"></view>
            <view class="box1"></view>
            <view class="box2"></view>
            </view>
        </swiper-item>
    	<swiper-item>
            <view class="v3">
            <view class="box"></view>
            <view class="box2"></view>
            <view class="box1"></view>
            <view class="box2"></view>
            <view class="box"></view>
            <view class="box1"></view>
            </view>
        </swiper-item>
       </swiper>
    </view>

**wxss**

.swp{ 
      width: 100%;
      height: 100%;
      padding-top: 80rpx;
    }
    page{ 
      height: 100%;
      background:#f4f4f4;
    }
    .select{ 
      color: blue;
    }
    .tab-body{ 
      position: fixed;
      top:0;
      width: 100%;
      z-index: 100;
      background: #dddddd;
    }
    .tab{ 
      display:flex;
      justify-content:space-around;
    }
    .box{ 
      width:50%;
      height: 500rpx;
      margin:0 auto;
      background:green;
    }
    .box1{ 
      width:50%;
      height: 500rpx;
      margin:0 auto;
      background:red;
    }
    .box2{ 
      width:50%;
      height: 500rpx;
      margin:0 auto;
      background:orange;
    }

**index.js**

Page({ 
      data:{ 
        currentTab: 0,
        swiperViewHeight: '',
        arr:['.v1','.v2','.v3']
      },
      // 滑动切换
      bindChange: function (e) { 
          var that = this;
          that.setData({ 
            currentTab: e.detail.current
          });
          this.setSwiperHeight(this.data.arr[e.detail.current])
        },
      //点击tab切换
        swichNav: function (e) { 
          var that = this;
          if (this.data.currentTab === e.target.dataset.current) { 
            return false;
          } else { 
            that.setData({ 
              currentTab: e.target.dataset.current
            })
          }
        },
      // 赋值高度
      setSwiperHeight: function (v) { 
      let query = wx.createSelectorQuery().in(this);
      query.select(v).boundingClientRect();
      query.exec((res) => { 
        let headerHeight = res[0].height;
        this.setData({ 
          swiperViewHeight: headerHeight
        });
      });
    },
      // swiper 自适应高度
      onLoad: function (options) { 
          this.setSwiperHeight(this.data.arr[0])
        },
    })

## 讲解 ##

其实这里核心解决方法就是动态获取每个tab页面的高度，使用了微信小程序自带的api来获取容器的高度。通过触发tab栏来获取对应的页面高度，达到不同tab栏不同容器高度效果。

--------------------

> 欢迎关注我的公众号，不定时发放前端精品电子书以及前端学习视频，更有精品文章等着你哦。  
> 你还可以加我微信，小弟拉拢了很多IT大佬，创建了一个技术交流、文章分享群，欢迎你的加入。
> 
>  *  作者：**Vam的金豆之路**
>  *  主要领域：**前端开发**
>  *  我的微信：**maomin9761**
>  *  微信公众号：**前端历劫之路**
> 
> ![1732f1042c850cb1_w_1066_h_1286_f_jpeg_s_106213][]

--------------------

[format_png]: /images/20210813/98752a32b379401aaba1bd26be01c147.png
[1732f1042c850cb1_w_1066_h_1286_f_jpeg_s_106213]: /images/20210813/9fadae768c88449b8cc96fe42dd5d856.png