vant中tab标签切换时会改变内容滚动高度

Posted wangmj518

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
1.
2.
3.
4.
5.
6.
  

避免切换时滚动高度被改变:

登录后复制 
<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>
-----------------------------------
vant中tab标签切换时会改变内容滚动高度
https://blog.51cto.com/u_15060511/4338442

以上是关于vant中tab标签切换时会改变内容滚动高度的主要内容,如果未能解决你的问题,请参考以下文章

vue 滚动条选中元素自动滚动到可视区域里居中显示

VANT标签栏样式改变

vantUI标签栏Tab滚动失效的解决

解决iscoll.js 与jquery的AJAX配合使用时会造成回弹的问题

实现tab左右滑动切换与下拉刷新,上拉加载结合

Flutter——TabBar组件(顶部Tab切换组件)