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

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

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

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

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

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

笑笑1234
关注
vue 使用vant插件做tabs切换和无限加载功能的实现
01-18
样例： 1.创建vue项目，不再详述 2.引入vant 之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了，大家可以借鉴，看源代码可能比官方给的文档更直观 官方文档 我在文件中的使用，没有使用下拉刷新的功能，大家可以直接看官网代码： <template> <div
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
总结来说，当我们在使用Vue结合VantUI开发具有Tab切换功能的页面时，可能会遇到List组件在非首Tab页触底时load事件不触发的问题。原因在于List组件的内部状态没有在Tab切换时得到重置。通过在Tab切换事件中添加对...
微信小程序scroll-view的scroll-into-view和vanUI的tabs标签结合使用
黎小小的博客
12-14 1069
背景：当tabs下的tab切换时，scroll-view滑动到对应的位置。scroll-into-view的值必须是动态值，即tab切换后的值。js:clickTab点击切换后更改动态的viewId才能正常切换。van-tab的name属性代表标签名称，作为匹配的标识符。van-tabs和scroll-view标签分开编写。
van-tab解决切换标签页，自动置顶，或者滚动位置不会记录
zthtt的博客
06-11 1121
tab页切换时记录位置
van-tabs中进行路由跳转时遇到的问题
最新发布
The_SkyUzi的博客
11-12 202
【代码】van-tabs中进行路由跳转时遇到的问题。
Vue3 + vant + Tab组件动态传递实现选项卡切换
qq_51463650的博客
02-27 2328
Vue3使用vant框架，使用选项卡组件Tab 标签页，用于在不同的内容区域之间进行切换。并动态传递active等于2，使得“已收货”亮起。
van-swipe中嵌套van-tabs,van-tabs无法单独滑动
tan_xiao_tan的博客
03-07 684
只需要在加一行代码即可实现"@touchmove.native.stop"当滑动tabs时阻止冒泡事件。
vant ui tab标签页，页签切换时滚动相互受影响，滚动距离与上一个浏览的页面同步
vera的博客
09-24 2595
已解决，目前在赶项目没时间写，后期补上
vant4 Tab 标签页切换数据
qi_qi_ai的博客
10-17 1261
vant4 Tab标签页切换数据，下拉刷新 上拉加载
vant Tab 标签页 切换
weixin_65635437的博客
05-25 1346
vant Tab 标签页 切换
vue vant不同tab切换加载更多且返回来后内容不改变的实现
jjw_zyfx的博客
04-02 3024
vue vant不同tab切换加载更多且返回来后内容不改变的实现
vant 2：van-tabs组件标签切换时滚动位置不准的问题
weixin_48226213的博客
07-21 2783
本文简要介绍了关于vue.js移动端开源组件库：vant 2的van-tabs组件标签切换时滚动位置不准的问题和处理方案。
解决vant中 tab栏遇到的坑 van-tabs
01-18
（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 所以，大部分人的解决办法就是将当前选中的tab的索引缓存起来，等回到该页面的时候，让被缓存的那个高亮显示出来。 坑的问题在于：van-tabs，里面的v-model...
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
在本示例中，我们将讨论如何实现一个功能，即Vue Tab组件的滚动固定和内容切换。这个功能对于创建响应式和交互性强的网页非常重要。 首先，Vue组件的核心是模板，这里我们看到一个`template`部分，包含两个主要元素...
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin-import (推荐) babel-plugin-...
vant组件库tabbar页面切换，跳转子页面tabbar隐藏，子页面跳转
Ann_52547的博客
11-03 3639
vant组件库tabbar页面切换，跳转子页面tabbar隐藏，子页面跳转
vant中tab标签切换时会改变内容滚动高度
wangmj518的专栏
06-24 2432
vant的tabs标签页，标签切换时会改变内容区的滚动高度，这是因为内容区共用同一个父元素为滚动区域引起的，解决办法：在tabs的内容区域嵌套一层滚动区域，让每个内容区域使用单独的滚动元素就行了。 常规用法： 内容 1 内容 2 内容 3 ...
vant组件tab切换自定义标题
努力变好
11-21 5440
包裹的标题内容，在标签中自定义你想要的标题，template标签里。把van-tab标签里的title="",换成用。好了，有问题可以私信或者评论留言~~~
vue中使用vant插件做tabs切换和无限加载功能
热门推荐
李水灵的博客
05-07 1万+
1.创建vue项目，不再详述 2.引入vant 之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使...
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、付费专栏及课程。

余额充值