vant中tab標簽切換時會改變內容滾動高度

vant的tabs標簽頁，標簽切換時會改變內容區的滾動高度，這是因為內容區共用同一個父元素為滾動區域引起的，解決辦法：在tabs的內容區域嵌套一層滾動區域，讓每個內容區域使用單獨的滾動元素就行了。

 

常規用法：  

<van-tabs v-model="active">
  <van-tab title="標簽 1">內容 1</van-tab>
  <van-tab title="標簽 2">內容 2</van-tab>
  <van-tab title="標簽 3">內容 3</van-tab>
  <van-tab title="標簽 4">內容 4</van-tab>
</van-tabs>

　　

避免切換時滾動高度被改變：

<van-tabs v-model="active">
  <van-tab title="標簽 1">
    <-- 嵌套一層div做內容滾動區域, 一定要有確定高度，可以使用高度100%或calc(100vh - ?px) -->
    <div style="height: 100%; overflow: auto;">內容 1</div>
  </van-tab>
  <van-tab title="標簽 2">
    <div>內容 2</div>
  </van-tab>
  <van-tab title="標簽 3">
    <div>內容 3</div>
  </van-tab>
  <van-tab title="標簽 4">
    <div>內容 4</div>
  </van-tab>
</van-tabs>