记录:小程序前端开发之tab选项卡与swiper高度自适应的问题与解决记录

小白前端，记录一下自己平时遇到的问题与解决方案，方便用到的时候查看。

今天，自己弄了一个选项卡，选项卡内容没有问题，可是到了选项卡下面的swiper的时候，就卡住了，我的需求是swiper里面的内容可以根据数据来自适应高度。因为swiper小程序必须要有固定的高度，不然就得用小程序封装的默认高度150rpx,而我里面的内容高度是不固定的，是根据数据来适应高度的，前前后后查了好久，网上的前辈们的博客也看了许多，可是都没有解决这个高度自适应的问题，最后还是问了同为大神的同学，给了scroll-view动态计算的高度，就解决了我好久不能搞定的问题，果然，经验无价啊。

效果图如下：

下面来记录功能代码：

wxml部分:

<view>
  <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 class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">待收货</view>
    <view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">已完成</view>
  </view>

  <swiper class='swiper' current='{{currentTab}}'  duration="300" bindchange="bindchange">
    <view >
      <swiper-item>
          <scroll-view scroll-y="true">
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>第一页</view>
            <view class='gaodu'>显示</view>
          </scroll-view>
        </swiper-item>
      </view>
    <swiper-item>
      <scroll-view scroll-y="true">
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
        <view class='gaodu'>第二页</view>
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <scroll-view scroll-y="true">
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
        <view class='gaodu'>第三页</view>
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <scroll-view scroll-y="true">
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>第四页</view>
        <view class='gaodu'>1第四页</view>
        <view class='gaodu'>0</view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

wxss部分:


.swiper-tab{
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
  position:fixed;
  top:0;
  z-index: 100;
  background: #fff;
}
.swiper-tab-item{
  flex: 1;
  text-align: center;
  border-bottom: 1rpx solid #eee;
}
.active{
  color: blue;
  position: relative;
}
.swiper-tab-item.active:after{
   content: "";
   display: block;
   height: 6rpx;
   width: 60rpx;
   background: #4675F9;
   position: absolute;
   bottom: 0;
   left: 65rpx;
   border-radius: 16rpx;
   }
.swiper{
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top:80rpx;
}
scroll-view{
  width: 100%;
  height: 93%;/*动态高度*/
}
.gaodu{
  height: 100rpx;
  background: rgb(196, 248, 255);
  text-align: center;
  line-height: 100rpx;
  border-bottom: 1rpx solid #4675F9;
}

js部分:

Page({
  data: {
    currentTab: 0 //预定的位置
  },
  //点击滑动
  bindchange: function (e) {
    let that = this;
    that.setData({
      currentTab: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  clickTab: function (e) {
    let that = this;
    if (that.data.currentTab === e.currentTarget.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.currentTarget.dataset.current
      })
    }
  }
})

记录:小程序前端开发之tab选项卡与swiper高度自适应的问题与解决记录

相关推荐