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

前言

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

干货

wxml

1. <!--index.wxml-->
2. <view class="container">
3. <view class="tab-body" hover-class="none" hover-stop-propagation="false">
4. <view class="tab">
5. <text class=" {{currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav">Tab1</text>
6. <text class=" {{currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav">Tab2 </text>
7. <text class=" {{currentTab==2 ? 'select' : ''}}" data-current="2" bindtap="swichNav">Tab3 </text>
8. </view>
9. </view>
10. <swiper current="{{currentTab}}" bindchange="bindChange" class='swp' style="height:{{swiperViewHeight}}px">
11. <swiper-item>
12. <view class="v1">
13. <view class="box"></view>
14. <view class="box2"></view>
15. </view>
16. </swiper-item>
17. <swiper-item>
18. <view class="v2">
19. <view class="box"></view>
20. <view class="box1"></view>
21. <view class="box2"></view>
22. </view>
23. </swiper-item>
24. <swiper-item>
25. <view class="v3">
26. <view class="box"></view>
27. <view class="box2"></view>
28. <view class="box1"></view>
29. <view class="box2"></view>
30. <view class="box"></view>
31. <view class="box1"></view>
32. </view>
33. </swiper-item>
34. </swiper>
35. </view>

wxss

1. .swp{
2. width: 100%;
3. height: 100%;
4. padding-top: 80rpx;
5. }
6. page{
7. height: 100%;
8. background:#f4f4f4;
9. }
10. .select{
11. color: blue;
12. }
13. .tab-body{
14. position: fixed;
15. top:0;
16. width: 100%;
17. z-index: 100;
18. background: #dddddd;
19. }
20. .tab{
21. display:flex;
22. justify-content:space-around;
23. }
24. .box{
25. width:50%;
26. height: 500rpx;
27. margin:0 auto;
28. background:green;
29. }
30. .box1{
31. width:50%;
32. height: 500rpx;
33. margin:0 auto;
34. background:red;
35. }
36. .box2{
37. width:50%;
38. height: 500rpx;
39. margin:0 auto;
40. background:orange;
41. }

index.js

1. Page({
2. data:{
3. currentTab: 0,
4. swiperViewHeight: '',
5. arr:['.v1','.v2','.v3']
6. },
7. // 滑动切换
8. bindChange: function (e) {
9. var that = this;
10. that.setData({
11. currentTab: e.detail.current
12. });
13. this.setSwiperHeight(this.data.arr[e.detail.current])
14. },
15. //点击tab切换
16. swichNav: function (e) {
17. var that = this;
18. if (this.data.currentTab === e.target.dataset.current) {
19. return false;
20. } else {
21. that.setData({
22. currentTab: e.target.dataset.current
23. })
24. }
25. },
26. // 赋值高度
27. setSwiperHeight: function (v) {
28. let query = wx.createSelectorQuery().in(this);
29. query.select(v).boundingClientRect();
30. query.exec((res) => {
31. let headerHeight = res[0].height;
32. this.setData({
33. swiperViewHeight: headerHeight
34. });
35. });
36. },
37. // swiper 自适应高度
38. onLoad: function (options) {
39. this.setSwiperHeight(this.data.arr[0])
40. },
41. })

讲解

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