小程序TAB列表切換內容動態變化，scrollview高度根據內容動態獲取

滑動tab選項卡

1、在小程序裏面tab選項卡是用的是自帶的swiper組件，下面直接上代碼

<view class="container">
  <view class="tab">
    <view class="tab-list {{currentTab==0? 'active':''}}" data-current="0" bindtap='switchNav'>運動專區</view>
    <view class="tab-list {{currentTab==1? 'active':''}}" data-current="1" bindtap='switchNav'>美食專區</view>
  </view>
  <swiper current='{{currentTab}}' class="swiper-box" duration='300' bindchange='bindChange' style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  <!--運動專區  -->
  <swiper-item class="swiper-content">
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <block wx:for="{{video}}" wx:key="video">
      <!-- <template name="video-detail"> -->
        <view class="video-detail-list">
          <view class="original">
            <text class="original-name">{{original}}</text>
            <view class="original-video">
              <video src="{{item.url}}"></video>
            </view>
            <view class="original-video-explain">
                <text class="original-video-date">{{item.addtime}}</text>
                <text class="original-video-name">{{item.title}}</text>
                <view class="original-video-detail">
                  <text>{{originalContent}}</text>
                </view>
            </view>
          </view>
        </view>
      </block>
    </scroll-view> 
  </swiper-item>

<!--美食專區  -->
    <swiper-item class="swiper-content">
      <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
        <block wx:for="{{video}}" wx:key="video">
          <view class="video-detail-list">
            <view class="original">
              <text class="original-name">{{original}}</text>
              <view class="original-video">
                <video src="{{item.url}}"></video>
              </view>
              <view class="original-video-explain">
                  <text class="original-video-date">{{item.addtime}}</text>
                  <text class="original-video-name">{{item.title}}</text>
                  <view class="original-video-detail">
                    <text>{{originalContent}}</text>
                  </view>
              </view>
            </view>
          </view>
        </block>
      </scroll-view> 
    </swiper-item>
  </swiper>
</view>

ps:你們都知道小程序是不能操做DOM的，因此這裏用getSystemInfo獲取設備高度,scrollview在這裏是一個內嵌的框架，列表在框架內滾動，它的高度其實就是屏幕的高度，不是裏邊列表項目的高度，
因此這裏設置max-height等都是無效的。

樣式代碼：

.container{
  width:100%;
  height: 100%; 
  background:#eee;
}

/*tab切換導航 */
.tab{
  width: 100%;
  color:#666666;
  height: 70rpx;
  font-size:28rpx;
  display: inline-block;
  text-align: center;
  background: #fff;
}
.tab-list{
  height: 70rpx;
  line-height: 70rpx;
  width: 50%;
  display: inline-block;
  z-index: 1000;
}
.active{
  border-bottom:4rpx solid #FD9D80;
}
.swiper-box{
  width: 100%;
  max-height:9999px; 
  display: block;
}


.video-detail-list{
  margin-top:16rpx;
  width:100%;
  background: #fff;

}
.video-detail-list .original-name{
   height: 80rpx;
   line-height: 80rpx; 
  text-align: center;
  display: block;
  font-size:28rpx;
}
.original-name{
  color:#999999;
}
.original-video{
  text-align: center;
}
.original-video video{
  width: 640rpx;
}
.original-video video{
  border-radius:16rpx;
}
.original-video-explain{
  width: 640rpx;
  margin-left:50rpx;
}
.original-video-date{
  font-size:28rpx;
  color:#6C6C6C;
}
.original-video-date text{
  display: inline-block;
}
.original-video-name{
  text-align: center;
  width: 55%;
  margin-top:8rpx;
  float:right;
  font-size:28rpx;
  color:#6C6C6C;
  overflow: hidden;  /* 超出自動隱藏 */
  text-overflow:ellipsis;  /* 文字隱藏後添加省略號 */
  white-space:nowrap;    /*  強制不換行 */
}
.original-video-detail{
  color:#A1A1A1;
  height: 30rpx;
  font-size:20rpx;
  /* margin-top:-10rpx; */
  
}
.original-video-detail text{
    width: 100%;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
    text-overflow:ellipsis;
    color:#666;
}

js代碼：

var videoUrl = 'http://t.jingduhealth.com/index/xcsvideo'
var app = getApp()
Page({
  data: {
    true:true,
    video:[],
    winWidth: 0,
    winHeight: 0, 
    currentTab: 0,  // tab切換 
  },
  //tab導航條切換事件
  bindChange:function(e){
    var that = this;
    that.setData({
      currentTab: e.detail.current
    })
  },
  switchNav:function(e){
    var that = this;
    if (this.data.currentTab === e.target.dataset.current){
      return false;
    }else{
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  onLoad: function () {
    var that = this;
    //進入頁面顯示正在加載的圖標
    wx.showToast({
      title: '正在加載中...',
      icon: 'loading',
      duration: 10000
    })
    wx.request({
      url:videoUrl,
      data:{},
      header:{
        'ContentType':'application/json'
      },
      success: function (res){
        //獲取到數據後隱藏正在加載圖標
        wx.hideLoading();
        console.log(res.data)
        that.setData({
            video:res.data.slice(0,2)  //獲取的數據截取數組下標0-2的數據
        })
      }
    })

    //獲取系統信息
    wx.getSystemInfo({
      success:function(res){
        that.setData({
          clientHeight: res.windowHeight   //設備的高度等於scroll-view內容的高度
        })
      }
    })
  }
})

成功後的截圖