小程序使用swiper做选项卡切换 并且高度自适应

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

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

  {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="switchNav">表白墙
  {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="switchNav">找对象



{{wHeight ? wHeight + 'px' : auto}}" current="{{currentTab}}" duration="300" bindchange="bindChange">
  
    {{true}}">
      
      {{loveList}}" wx:key="index">
      
    
  
  
  
    {{true}}">
      
      {{saleList}}" wx:key="index">
      
    
  

js部分：

// 获取应用实例
var app = getApp()
Page({
  data: {
    
    currentTab: 0,
    loveList: [], // 定义一个空数组,用来接收从云数据库获取的数据
    saleList: [],
    wHeight: ''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 获取可视区域高度
    wx.getSystemInfo({
      success(res) {
        that.setData({
          wHeight: res.windowHeight - 80
        })
      }
    })
  },

  /**
   * 滑动切换tab
   */
  bindChange: function(e) {
    var that = this;
    that.setData({
        currentTab: e.detail.current
      })
  },

  /**
   * 点击 tab 切换 
   */
  switchNav: function(e) {
    var that = this;
    if(this.data.currentTab === e.target.dataset.current) {
      return false;
    }else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
})

wxss部分：

.item {
  width: 100%;
  height: 80rpx;
  display: flex;
  align-items: center;
  border-bottom: 3rpx solid #eee
}
.item-list {
  padding: 20rpx 0;
  width: 50%;
  text-align: center;
}

/* 内容切换 */
.on {
  color: #43CD80;
  font-weight: bold;
}
swiper {
  height: 100%;
  width: 100%;
  /* margin-bottom: 300rpx; */
}
scroll-view {
  height: 100%;
}
.swiper-item view {
  color: #000;
  text-align: center;
}