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

原创已于 2023-03-28 20:09:22 修改 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2023-03-28 20:06:06 首次发布

文章讨论了在使用van-tab组件时遇到的一个问题，即首次点击tab时，由于其他tab被设置为display:none，导致页面高度暂时为0。为了解决这个问题，提出了使用min-height:100vh的样式策略，确保内容始终占用整个页面高度，防止页面滚动到顶部。

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mingyun-zjk

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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解决切换标签页，自动置顶，或者滚动位置不会记录

热门推荐

张凡

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

3882

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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">  </van-tabbar>  </van-tabs> ``` 这样设置后，在滚动到页面底部时，Tab 栏会固定在页面顶部，不再跟随滚动。