微信小程序-swiper自适应宽高

效果图

需求背景

项目需要做一个swiper切换栏,点击/滑动的页面切换效果，可以使用swiper来实现，但是swiper默认高度为150，不会自适应高度，所以当页面数据过多，超过页面可视区域，会导致页面无法上下滑动的情况

解决办法

使用scroll-view包裹页面元素，并且动态设置swiper的高度，让其根据内容的高度自适应

代码部分

WXML:

<view class='TabSwiper flex'>
    <view class="line"></view>
    <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>简介</view>
    <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>评论({{collect}})</view>
</view>
<swiper class='swiper'  style="height: {{clientHeight?clientHeight+'px':'auto'}}" current="{{currentData}}" duration="300" bindchange="swiperchange">
    <swiper-item>
        简介部分
    </swiper-item>
     <swiper-item>
        <scroll-view 
            scroll-y="{{true}}" 
            style="height: {{clientHeight?clientHeight+'px':'auto'}}"
             bindscrolltolower="scrollbot"
        >
            <view class='swiper_con flex' wx:for="{{swiper_info}}" wx:key="index" wx-item="item">
                <view class="swiper_con_left">
                    <navigator hover-class="none" open-type="navigate">
                        <image class="" src="{{item.avatar}}"></image>
                    </navigator>
                </view>
            <view class="swiper_con_right">
                <view class="right_title">{{item.title}}</view>
                <view class="right_data">{{item.data}}</view>
                <view class="right_message">{{item.message}}</view>
                <view class="line"></view>
            </view>
            </view>
        </scroll-view>
    </swiper-item>
</swiper>

wxss:

.TabSwiper {
    align-items: center;
    justify-content: center;
    position: relative;
    height: 80rpx;
    .line {
        height: 40rpx;
        width: 1rpx;
        border: 1px solid #ccc;
        position: absolute;
        left: 50%;
        top: 25%;
    }
    .tab {
        text-align: center;
        flex: 1;
    }
    .tabBorer {
        font-size: 30rpx;
        font-weight: bold;
    }
  }
  .swiper {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-size: 26rpx;
    padding: 30rpx;
    color: #696969;
    .swiper_con {
        padding-bottom: 40rpx;
        .swiper_con_left {
            flex: 1;
            image {
                border-radius: 50%;
                height: 90rpx;
                width: 90rpx;
            }
        }
        .swiper_con_right {
            color: #000;
            flex: 5;
            .right_title {
                font-size: 30rpx;
                font-weight: bold;
            }
            .right_data {
                font-size: 24rpx;
                color: #696969;
            }
            .right_message {
                font-size: 28rpx;
                padding: 10rpx 0 40rpx 0;
            }
            .line {
                height: 1rpx;
                width: 100%;
                border:1rpx solid #ccc;
            }
        }
      }
  }

js:

Page({
    data: {
       currentData: 0,
        swiper_info: [
      {
        id: 0,
        avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2057588226,2402156864&fm=11&gp=0.jpg',
        title: '海绵宝宝',
        data: '2020/08/11',
        message: '海绵宝宝真可爱呀!'
      }, {
        id: 1,
        avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2902873695,2157267194&fm=11&gp=0.jpg',
        title: '天线宝宝',
        data: '2020/08/11',
        message: '天线宝宝真可爱呀!'
      }, {
        id: 2,
        avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2070453827,1163403148&fm=26&gp=0.jpg',
        title: '大头宝宝',
        data: '2020/08/11',
        message: '大头宝宝真可爱呀!'
      },{
        id: 3,
        avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2057588226,2402156864&fm=11&gp=0.jpg',
        title: '海绵宝宝',
        data: '2020/08/11',
        message: '海绵宝宝真可爱呀!'
      }, {
        id: 4,
        avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2902873695,2157267194&fm=11&gp=0.jpg',
        title: '天线宝宝',
        data: '2020/08/11',
        message: '天线宝宝真可爱呀!'
      }, {
        id: 5,
        avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2070453827,1163403148&fm=26&gp=0.jpg',
        title: '大头宝宝',
        data: '2020/08/11',
        message: '大头宝宝真可爱呀!'
      }, {
        id: 6,
        avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2057588226,2402156864&fm=11&gp=0.jpg',
        title: '海绵宝宝',
        data: '2020/08/11',
        message: '海绵宝宝真可爱呀!'
      }, {
        id: 7,
        avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2070453827,1163403148&fm=26&gp=0.jpg',
        title: '大头宝宝',
        data: '2020/08/11',
        message: '大头宝宝真可爱呀!'
      },{
        id: 8,
        avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2902873695,2157267194&fm=11&gp=0.jpg',
        title: '天线宝宝',
        data: '2020/08/11',
        message: '天线宝宝真可爱呀!'
      }, {
        id: 9,
        avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2057588226,2402156864&fm=11&gp=0.jpg',
        title: '海绵宝宝',
        data: '2020/08/11',
        message: '海绵宝宝真可爱呀!'
      },{
        id: 10,
        avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2902873695,2157267194&fm=11&gp=0.jpg',
        title: '天线宝宝',
        data: '2020/08/11',
        message: '天线宝宝真可爱呀!'
      }, {
        id: 11,
        avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2070453827,1163403148&fm=26&gp=0.jpg',
        title: '大头宝宝',
        data: '2020/08/11',
        message: '大头宝宝真可爱呀!'
      },
    ],
    },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this 
    wx.getSystemInfo({ 
        success: function (res) { 
            that.setData({ 
                clientHeight: res.windowHeight 
            }); 
        } 
    }) 

  },
   /** 获取当前滑块的index */
   swiperchange: function(e) {
    var that = this 
    console.log(e.detail.current) 
    that.setData({
      'currentData': e.detail.current
    })
  },
  /** 点击切换,滑块赋值,简介/评论切换 */
  checkCurrent:function(e){
    const that = this;
 
    if (that.data.currentData === e.target.dataset.current){
        return false;
    }else{
 
      that.setData({
        currentData: e.target.dataset.current
      })
    }
  },
})