vant-tab 切换不同的tab，页面滚动一致

最新推荐文章于 2024-06-11 15:13:17 发布
最新推荐文章于 2024-06-11 15:13:17 发布
阅读量1.4k 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014105739/article/details/134205450
版权

vant-tab 切换不同的tab,  假如第一个tab下的界面滑动了一段距离， 点击第二个界面初次加载，

再次返回第一个界面，会发现第一个界面这个时候也回到了顶部，反正不管怎么切换滑动，每个页面的滚动距离都会收到其他界面的影响，会滑动到相同的距离，

最后发现是vant-tab 的所有tab 都使用的是同一个滚动条，就是都是最外面的滚动条

解决方法：每个tab界面使用自己的单独滚动条避免此类问题

笑笑1234
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
vue van-tabs组件切换tab时候，影响display:fixed属性导致降级问题解决
sinat_42888557的博客
04-20 1805
vue vant2 van-tabs组件切换tab时候，影响display:fixed属性导致降级问题解决 <template> <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-ta
van-tab解决切换标签页，自动置顶，或者滚动位置不会记录
最新发布
zthtt的博客
06-11 409
tab页切换时记录位置
小程序van-tabs中滚动条滚动不隐藏标题的设置
种麦南山下的博客
06-09 1913
<demo-block> <van-tabs bind:click="onClick" > <van-tab title="待出库"> <view class="content"> <van-cell wx:for="{{ outSystemInfo }}" wx:key="index" title="{{ item.title }}" value="{{ item.value }}" label="{{ ite.
vant 2：van-tabs组件标签切换时滚动位置不准的问题
weixin_48226213的博客
07-21 2003
本文简要介绍了关于vue.js移动端开源组件库：vant 2的van-tabs组件标签切换时滚动位置不准的问题和处理方案。
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看头条tab栏） 点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示刚才被点击的tab栏高亮显示。（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 所以，大部分人的解决办法就是将当前选中的tab的索引缓存起来，等回到该页面的时候，让被缓存的那个高亮显示出来。 坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时用缓存赋值给 v-model = ” active ”
vant中tab标签切换时会改变内容滚动高度
wangmj518的专栏
06-24 2269
vant的tabs标签页，标签切换时会改变内容区的滚动高度，这是因为内容区共用同一个父元素为滚动区域引起的，解决办法：在tabs的内容区域嵌套一层滚动区域，让每个内容区域使用单独的滚动元素就行了。 常规用法： 内容 1 内容 2 内容 3 ...
vant移动端实现tab锚点定位和tab随滚动条自动切换
m0_50441807的博客
07-02 5008
我们先实现锚点定位，锚点定位需要借助方法，这个方法会把当前元素的顶部定位到所在有滚动条的父元素的顶部，从而实现锚点定位的功能： 注：上面不一定要使用a标签来点击定位，其他标签的点击也是可以的，这里用是因为a标签自带点击的手势图标； 实现锚点定位并不难，只需要用方法，接下来要实现滚动条滚动到哪个元素的顶部，tab就对应切换； 下面先了解几个方法的区别：，， clientHeight：带有滚动条盒子的高度 scrollHeight：带有滚动条盒子里面的滚动内容的高度 scrollTop：滚动内容被卷入的高度
vant 2：van-tabs组件标签切换时滚动位置不准的问题之后续
weixin_48226213的博客
07-22 816
本文接之前van-tabs组件标签切换时滚动位置不准的问题，给出真正原因和完美处理方法
Vue3 + vant + Tab组件动态传递实现选项卡切换
qq_51463650的博客
02-27 1475
Vue3使用vant框架，使用选项卡组件Tab 标签页，用于在不同的内容区域之间进行切换。并动态传递active等于2，使得“已收货”亮起。
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
在本示例中，我们将讨论如何实现一个功能，即Vue Tab组件的滚动固定和内容切换。这个功能对于创建响应式和交互性强的网页非常重要。 首先，Vue组件的核心是模板，这里我们看到一个`template`部分，包含两个主要元素...
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
使用了vant-ui里的 List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin...
vant tabs 切换模块，字数过多的时候如何滑动
qiujinlong11的博客
01-10 5183
项目中修改tabs 为 width 自适应，并且左排列 可以修改 scoped 的 style 样式 /deep/ .van-tab { font-size: rem(16); padding: 0; margin-right: rem(10); flex: 0 0 auto!important; } 达到效果 vant 默认tabs为弹性布局，他的tab项是 flex:0 0 ...
vant中tab使用组件，并且手势滑动
Qing_X_C的博客
02-27 8139
因为要使用tab页切换组件，只能使用name匹配 而vant中的tab手势滑动又必须是索引值才生效 一直以为：鱼与熊掌不能兼得，直到今天！！！ （￣︶￣）↗　 以前的代码 <van-tabs v-model="tabName" swipeable title-active-color="#0084FF" color="#0084FF"> <van-tab name="...
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
xiaohua616的博客
08-02 1834
van-tabs 去除横向滚动条样式
关于使用vant组件库，点击van-tab，返回到页面顶部问题解决
Strive_Limingyun的博客
03-28 1924
原因是当我们点击第一个van-tab，其余van-tab display:none ,页面数据加载再后，导致高度暂时为0，当第二轮点击之后，就不会出现这个问题，解决方式使用min-height=100vh,占用一个页面高度，不让他回到页面顶部。
小程序 Vant Weapp 使用van-tabs控制切换tab请求后台频率
java_novice_qx的博客
09-18 761
这里写微信小程序代码，使用的vant组件库，然后想控制频繁的切换tab让后台发送请求的评论，这里实际是二级目录，但是和一级tabs的关系不大，所以不展示了，只需要知道这是一层就好了通过handleTabChange来控制，需要再data里面定义上次接口调用的时间，和选中的标签，来记录时间和加载默认选中项。
vant-tab切换不重新渲染
05-01
vant-tab是一个常用的tab选项卡组件，通常用来实现页面中的多标签切换。在使用vant-tab时，通过切换选项卡可以显示不同的内容，而且vant-tab切换的过程实现了不重新渲染的效果。这也是vant-tab所具有的重要特性之一。具体的实现原理如下： vant-tab的组件内部采用了keep-alive组件来实现tab切换不重新渲染的效果。在tab选项卡组件中，每个选项卡对应着不同的组件，这些组件中可能存在状态、数据等需要保留的内容。在切换tab选项卡时，如果重新渲染组件，那么之前用户已经填写的内容就可能会丢失，同时重新渲染也会消耗一定的性能。 为了实现tab选项卡切换不重新渲染的效果，vant-tab采用了keep-alive组件。keep-alive组件是Vue框架提供的一个性能优化组件，它可以将已经渲染过的组件缓存起来，并且在下一次需要重新渲染时，直接从缓存中读取组件，而不是重新创建一个组件实例。这样就能够避免重新渲染组件带来的性能损耗，并且能够保留之前用户已经填写的内容。 总之，vant-tab通过采用keep-alive组件，实现了tab切换不重新渲染的效果，从而提高了页面的性能和用户体验。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值