微信小程序解决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栏不同容器高度效果。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

1 + 7 =