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

已于 2023-03-28 20:09:22 修改
阅读量2.2k 收藏
点赞数 2
文章标签： 前端 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组件时遇到的一个问题，即首次点击tab时，由于其他tab被设置为display:none，导致页面高度暂时为0。为了解决这个问题，提出了使用min-height:100vh的样式策略，确保内容始终占用整个页面高度，防止页面滚动到顶部。
摘要由CSDN通过智能技术生成

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

Mingyun-zjk
关注
vant list列表组件分页场景使用 及 搜索框输入-请求数据-防抖处理
luoxiaonuan_hi的博客
05-25 2316
vant list列表组件分页场景使用 及 搜索框输入-请求数据-防抖处理
解决Vant popup组件里面定位不生效的问题
wabcainiao的博客
11-19 2196
解决vant popup定位失效的问题
微信小程序——吸顶效果以及返回顶部
weixin_51198863的博客
12-22 1573
吸顶：指的是当页面滚动时，让某个盒子固定在头部位置，一般都是固定一个标签栏 实现思路 使用vant组件库提供的小程序组件，封装完美，复制即用，真香 vant-Weapp 粘性布局 我们需要先安装vant-weapp插件，构建npm模块，在json中注册组件，才能使用，如何安装看官网说明 值得注意的是， 你如果使用了微信小程序自带的scroll-view组件，并在其中使用粘性布局组件会失效； 大概原因应该是scroll-view的滚动无法让粘性布局组件感知到自己有没有到顶部…… 解决思路：换其他思路.
Vue实现一个返回顶部backToTop组件
08-29
本篇文章主要介绍了Vue实现一个返回顶部backToTop组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下
封装返回顶部组件 vant-ui
qq_43806488的博客
12-17 2211
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 588
BackTop
vue2+vant2实现移动端下拉刷新、上拉加载及返回顶部功能
qq_45040431的博客
11-09 3716
【代码】vue2+vant2实现移动端下拉刷新、上拉加载及返回顶部功能。
vant-list上滑加载，数据重复，加载后返回顶部，或者不加载更多数据
qq_42440919的博客
11-17 3896
list上拉加载
解决vant中 tab栏遇到的坑 van-tabs
01-18
点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示刚才被点击的tab栏高亮显示。（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 ...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
首先，问题的背景是这样的：在使用VantUI组件库时，开发人员可能会利用List组件的load事件来实现瀑布流式的滚动加载功能，这在处理大量数据项时尤为常见。当用户滚动列表至底部时，通过load事件触发并加载更多的数据...
vue实现移动端返回顶部
10-14
主要为大家详细介绍了vue实现移动端返回顶部，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vant 动态 粘性布局_vant的展示组件-Sticky 粘性布局
weixin_30260621的博客
02-22 2580
介绍Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。引入import Vue from 'vue';import { Sticky } from 'vant';Vue.use(Sticky);代码演示基础用法将内容包裹在Sticky组件内即可。基础用法吸顶距离通过off...
页面返回顶部
Wangdr的博客
04-18 715
$("html,body").animate({scrollTop:0}, 0);
van-tab解决切换标签页，自动置顶，或者滚动位置不会记录
最新发布
zthtt的博客
06-11 1135
tab页切换时记录位置
van-button回到顶部按钮
m0_46404694的博客
02-24 853
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 3323
Vant2组件库van-list+Toast下拉加载滚动条回顶问题 目录 List 列表 Toast 轻提示 解决方案 1、不使用Toast 的 加载提示 2、修改调整pointer-event 属性值 3、判断是否为第一次加载再使用 4、forbidClick 设置为 false 5、自定义组件
返回顶部组件
caoyuan258的博客
12-08 145
<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 928
&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 2138
<template> <div class="center"> <div class="btnTop" v-if="btnFlag" @click="backTop()">回顶部</div> </div> </template> <script> im...
微信小程序中vant组件库van-search进入页面自动获取焦点具体代码
04-23
可以在 van-search 组件的 mounted 钩子中使用 $nextTick() 方法，将焦点转移到输入框上。 具体代码示例： ``` <van-search v-model="keyword" placeholder="搜索" /> export default { data() { return { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值