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

已于 2023-03-28 20:09:22 修改
阅读量2.4k 收藏
点赞数 3
CC 4.0 BY-SA版权
文章标签： 前端 vue.js javascript
于 2023-03-28 20:06:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Strive_Limingyun/article/details/129823790
文章讨论了在使用van-tab组件时遇到的一个问题，即首次点击tab时，由于其他tab被设置为display:none，导致页面高度暂时为0。为了解决这个问题，提出了使用min-height:100vh的样式策略，确保内容始终占用整个页面高度，防止页面滚动到顶部。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

Mingyun-zjk
关注
vant list列表组件分页场景使用 及 搜索框输入-请求数据-防抖处理
luoxiaonuan_hi的博客
05-25 2430
vant list列表组件分页场景使用 及 搜索框输入-请求数据-防抖处理
解决Vant popup组件里面定位不生效的问题
wabcainiao的博客
11-19 2337
解决vant popup定位失效的问题
Vue实现一个返回顶部backToTop组件
08-29
本篇文章主要介绍了Vue实现一个返回顶部backToTop组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下
封装返回顶部组件 vant-ui
qq_43806488的博客
12-17 2323
vant居然没有返回顶部组件没办法自己封装一个 <template> <div> <van-button color="rgba(0,0,0,.3)" round class="backTop" size="mini" @click="backTop" v-show="scrollType" > <van-icon class="icon-backTop" nam
vantUI回到顶部（BackTop）
Twelve0805的博客
01-18 675
BackTop
vue2+vant2实现移动端下拉刷新、上拉加载及返回顶部功能
qq_45040431的博客
11-09 4531
【代码】vue2+vant2实现移动端下拉刷新、上拉加载及返回顶部功能。
van-tab解决切换标签页，自动置顶，或者滚动位置不会记录
最新发布
zthtt的博客
06-11 1451
tab页切换时记录位置
解决vant中 tab栏遇到的坑 van-tabs
01-18
点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示刚才被点击的tab栏高亮显示。（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 ...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
首先，问题的背景是这样的：在使用VantUI组件库时，开发人员可能会利用List组件的load事件来实现瀑布流式的滚动加载功能，这在处理大量数据项时尤为常见。当用户滚动列表至底部时，通过load事件触发并加载更多的数据...
微信小程序使用有赞van-tabbar组件
热门推荐
张凡
03-26 1万+
前面一篇文章已经说过怎么搭建微信小程序npm项目了，看这篇文章前先了微信小程序npm构建https://blog.csdn.net/Acer2016/article/details/86999341 废话不多说，直接进入主题 1.在需要使用的页面的 .json文件里面添加配置（根据自己插件路径配置） "usingComponents": { "van-tabbar": "/miniprog...
vue实现移动端返回顶部
10-14
主要为大家详细介绍了vue实现移动端返回顶部，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vant-list上滑加载，数据重复，加载后返回顶部，或者不加载更多数据
qq_42440919的博客
11-17 4053
list上拉加载
页面返回顶部
Wangdr的博客
04-18 735
$("html,body").animate({scrollTop:0}, 0);
van-button回到顶部按钮
m0_46404694的博客
02-24 875
template中 <!-- 回到顶部按钮 --> <van-button type="info" class="backTop" color="#5cccfb" plain hairline round @click="backTop" icon="arrow-up" v-if="showgo" > //检测滚动条高度，大于300时出现按钮
Vant2组件库van-list+Toast下拉加载滚动条回顶问题
Mr.小灰狼_随笔
01-08 3883
Vant2组件库van-list+Toast下拉加载滚动条回顶问题 目录 List 列表 Toast 轻提示 解决方案 1、不使用Toast 的 加载提示 2、修改调整pointer-event 属性值 3、判断是否为第一次加载再使用 4、forbidClick 设置为 false 5、自定义组件
返回顶部组件
caoyuan258的博客
12-08 171
<template> <div> <h3>我是首页</h3> <div> <p>fdf</p> <p>dfdf</p> <p>dd</p> <p>fdf</p> <p>dd</p> <p>df</p> .
锚点定位及返回顶部
狼道的博客
08-07 956
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="jquery.1.9.1.min.js"&gt
vue实现点击回到顶部
weixin_30519071的博客
03-02 2153
<template> <div class="center"> <div class="btnTop" v-if="btnFlag" @click="backTop()">回顶部</div> </div> </template> <script> im...
tab切换时，滚动会重新回到顶部，怎么避免这个问题？
f18515962596的博客
10-10 1376
暂时处理：用visibility代替display，并且把隐藏的面板高度设为0。
vant组件库中的Tab 标签页怎样滑动到底部的时候tab栏固定
05-26
在 Vant 的 Tab 组件中，可以使用 `sticky` 属性来实现在滑动到底部时固定 Tab 栏。具体实现方法如下： 1. 在 `van-tabs` 组件上设置 `sticky` 属性为 `true`，这将启用 Tab 栏固定功能。 2. 在 `van-tabs` 组件上设置 `scrollspy` 属性为 `true`，这将启用滚动监听功能。 3. 在 `van-tabs` 组件的 `van-tabbar` 子组件上设置 `position` 属性为 `fixed`，这将使 Tab 栏固定在页面顶部。 完整代码如下： ```html <van-tabs sticky scrollspy> <van-tabbar position="fixed"> <!-- Tab 栏内容 --> </van-tabbar> <!-- Tab 内容 --> </van-tabs> ``` 这样设置后，在滚动到页面底部时，Tab 栏会固定在页面顶部，不再跟随滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值