关于使用vant组件库，点击van-tab，返回到页面顶部问题解决

已于 2023-03-28 20:09:22 修改
阅读量1.8k 收藏
点赞数 1
文章标签： 前端 vue.js javascript
于 2023-03-28 20:06:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Strive_Limingyun/article/details/129823790
版权

原因是当我们点击第一个van-tab，其余van-tab display:none ,页面数据加载再后，导致高度暂时为0，当第二轮点击之后，就不会出现这个问题，解决方式使用min-height=100vh,占用一个页面高度，不让他回到页面顶部
在这里插入图片描述

Mingyun-zjk
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vant2组件库van-list+Toast下拉加载滚动条回顶问题
Mr.小灰狼_随笔
01-08 2323
Vant2组件库van-list+Toast下拉加载滚动条回顶问题 目录 List 列表 Toast 轻提示 解决方案 1、不使用Toast 的 加载提示 2、修改调整pointer-event 属性值 3、判断是否为第一次加载再使用 4、forbidClick 设置为 false 5、自定义组件
vant-list + toast分页加载，数据加载后会滚动至顶部
亚卡卡的专栏
09-06 606
vant-list + toast分页加载，数据加载后会滚动至顶部
微信小程序回到顶部
最新发布
我是小鹏呀的博客
05-18 216
wxml页面 scroll-with-animation：使用滚动动画过渡。wxml页面，catchtap阻止冒泡事件。
vant-tab 切换不同的tab，页面滚动一致
u014105739的博客
11-03 1334
再次返回第一个界面，会发现第一个界面这个时候也回到了顶部，反正不管怎么切换滑动，每个页面的滚动距离都会收到其他界面的影响，会滑动到相同的距离，vant-tab 切换不同的tab, 假如第一个tab下的界面滑动了一段距离， 点击第二个界面初次加载，最后发现是vant-tab 的所有tab 都使用的是同一个滚动条，就是都是最外面的滚动条。解决方法：每个tab界面使用自己的单独滚动条避免此类问题。
vue vant不同tab切换加载更多且返回来后内容不改变的实现
jjw_zyfx的博客
04-02 2396
vue vant不同tab切换加载更多且返回来后内容不改变的实现
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
主要介绍了vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
11-19
假如你引入之后发现页面的样式和组件都挂载了，但是console控制台会报错，说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题，重新下载一个最新的vant就可以了，现在是2.6.0版本 好，接下来继续 在...
解决vant中 tab栏遇到的坑 van-tabs
01-18
点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示刚才被点击的tab栏高亮显示。（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 ...
vant 自定义 van-dropdown-item的用法
10-15
在移动应用开发中，Vant UI 是一款流行的组件库，它为 Vue.js 应用提供了丰富的 UI 元素和交互设计。本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 ...
解决vant title-active-color与title-inactive-color不生效问题
01-18
假如你引入之后发现页面的样式和组件都挂载了，但是console控制台会报错，说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题，重新下载一个最新的vant就可以了，现在是2.6.0版本 好，接下来继续 在...
vue实现移动端返回顶部
10-14
主要为大家详细介绍了vue实现移动端返回顶部，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
antdv tabs标题栏tabbar顶部吸附固定
qq_44367273的博客
12-24 4239
antdv tabs标签页组件tabBar顶部吸附，方便在抽屉里使用tabs组件时且tab内容过长时切页
vant tabs sticky模式下的bug
sdaulee的博客
04-11 2967
vant tabs sticky模式下，本来应该在滑动一段距离后才吸顶，结果页面加载完成就吸顶了。 解决方式:给sticky属性增加一个控制变量，当页面滑动时，变量置为true。 实施： 1、给tabs外层增加一个父级用于滚动监听，css设置： height: calc(100vh - 54px); overflow: hidden scroll; 2、添加监听： methods中增加滚动处理函数 handleScroll() { let top = document.q...
小程序uniapp 回到页面顶部
LW0512的博客
12-01 918
uni-app 回到页面顶部 官网地址：https://uniapp.dcloud.io/component/scroll-view 实现的效果如下图所示 HTML部分 <scroll-view scroll-y class="store_scroll" :lower-threshold="20" :scroll-top="scrollTop" @scroll="scrollEvent" @sc
VUE 控制el-tabs标签页切换后滚动条回到顶部
NeverGiveUp_Up的博客
05-17 2794
使用场景：标签页中内容较多时，滚动条滑到底部，切换tab后，滚动条还是在底部； 预期：切换tab后滚动条能回到顶部 代码实现：el-tabs 绑定点击事件 tabChange <el-tabs class="tabs" v-model="activeName" @tab-click="tabChange"> <el-tab-pane label="交互规范" name="first"> <ui-main></ui-m
滚动页面，实现导航栏固定在顶部（吸顶效果）
热门推荐
Kris的博客
01-02 4万+
首先最简单的，是利用position的sticky属性 说明 sticky 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。 它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：0)；position:sticky这时的效果相当于fixed定位，固定在(top: 0...
实现vue返回顶部backTop组件
zezejingi的博客
12-29 593
实现vue返回顶部backTop组件，在一些页面比较长的时候，可能会用到回到顶部功能，一般都是右下角一个图标我们点击可以返回到顶部，这个功能还是蛮常见的在一些网页中，这个功能看起来还是蛮简单的，我们可以自由发挥。
Vant list 与better-scroll与下拉刷新（其实是上拉加载）
HYeeee的博客
10-02 1万+
先是用了vant的LIst下拉刷新，然后发现better-scroll中这个插件没有用，然后自己写了个监听！最后发现一篇文章有封装scroll中下拉刷新！这个过程也是莫名其妙了。 1、首先是用了Vant的List实现 Vant List官网 这部分就是官网的例子修改了点。注意一个参数：immediate-check 是否在初始化时立即执行滚动位置检查，默认是true，就在created的时候就执...
微信小程序中vant组件库van-search进入页面自动获取焦点具体代码
04-23
抱歉，我作为AI语言模型并不能直接提供代码，但是我可以为您提供一些思路。可以在 van-search 组件的 mounted 钩子中使用 $nextTick() 方法，将焦点转移到输入框上。 具体代码示例： ``` <template> <van-search v-model="keyword" placeholder="搜索" /> </template> <script> export default { data() { return { keyword: '' }; }, mounted() { this.$nextTick(() => { const input = document.querySelector('.van-search__input'); input.focus(); }); } }; </script> ``` 需要注意的是，使用 document.querySelector('.van-search__input') 获取输入框时，可能需要根据实际情况对 class 名进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值