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>