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

已于 2023-03-28 20:09:22 修改
阅读量1.9k 收藏
点赞数 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
    评论
Vue实现一个返回顶部backToTop组件
08-29
本篇文章主要介绍了Vue实现一个返回顶部backToTop组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下
解决vant-popup在有滚动条的页面，弹出遮罩层时页面会滚动到顶部
lucky_ax的博客
10-15 7643
记录一下,使用vant-popup弹出层时,弹出遮罩层时页面会滚动到最顶部 使用代码 代码 <van-popup v-model="Picker_chufen" position="bottom"> <van-picker show-toolbar item-height="35px" :columns="columns_chufe
van-tab解决切换标签页，自动置顶，或者滚动位置不会记录
最新发布
zthtt的博客
06-11 418
tab页切换时记录位置
vant-list上滑加载，数据重复，加载后返回顶部，或者不加载更多数据
qq_42440919的博客
11-17 3672
list上拉加载
vue2+vant2实现移动端下拉刷新、上拉加载及返回顶部功能
qq_45040431的博客
11-09 2706
【代码】vue2+vant2实现移动端下拉刷新、上拉加载及返回顶部功能。
vantUI回到顶部（BackTop）
Twelve0805的博客
01-18 450
BackTop
封装返回顶部组件 vant-ui
qq_43806488的博客
12-17 1976
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
Vant2组件库van-list+Toast下拉加载滚动条回顶问题
Mr.小灰狼_随笔
01-08 2518
Vant2组件库van-list+Toast下拉加载滚动条回顶问题 目录 List 列表 Toast 轻提示 解决方案 1、不使用Toast 的 加载提示 2、修改调整pointer-event 属性值 3、判断是否为第一次加载再使用 4、forbidClick 设置为 false 5、自定义组件
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
11-19
在Vue项目中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题（title）始终不会根据所选的选项进行更新。本篇将详细介绍如何解决这个问题。 首先，确保正确安装并引入Vant组件...
解决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版本 好，接下来继续 在...
使用vant组件库中的list组件，分页查询数据后，列表会滚动到顶部解决
唐唐唐行的博客
10-08 3042
参考： vant list列表滚动到底部加载更多会滚动到顶部问题 - 飞天狼 - 博客园如果使用异步加载数据并使用了vant中的toast做加载中提示，则有可能会导致列表滚动高度为0，也就是回到了顶部。只要在list加载回调里不使用toast就可以避免这个问题。https://www.cnblogs.com/hyfl847/p/15219041.html解决方案，参考了以上链接的回答： vant组件库中的list组件使用异步加载数据时，并使用了vant中的toast做加载中的loading...
点击tab栏如何让tab置顶
qq_42931285的博客
04-22 1032
滚动吸顶
vue2.0_在vue中使用VantUI 实现移动端返回顶部操作
QiuRenBB的博客
09-10 2626
前言   今天在做移动端项目的时候，发现vant官网并没有返回顶部的组件和相关内容。因此，今天记录一下移动端返回顶部的操作。废话不多说，直接上代码。 实现 html部分: <van-button color="#EABA6B" class="backTop" @click="backTop" v-show="scrollType"> <van-icon class="icon-backTop" name="arrow-up" size="25" /> </van-b
vant-list + toast分页加载，数据加载后会滚动至顶部
亚卡卡的专栏
09-06 617
vant-list + toast分页加载，数据加载后会滚动至顶部
vant-tab 切换不同的tab，页面滚动一致
u014105739的博客
11-03 1419
再次返回第一个界面，会发现第一个界面这个时候也回到了顶部，反正不管怎么切换滑动，每个页面的滚动距离都会收到其他界面的影响，会滑动到相同的距离，vant-tab 切换不同的tab, 假如第一个tab下的界面滑动了一段距离， 点击第二个界面初次加载，最后发现是vant-tab 的所有tab 都使用的是同一个滚动条，就是都是最外面的滚动条。解决方法：每个tab界面使用自己的单独滚动条避免此类问题。
微信小程序 - tab标签页通过点击事件获取索引加载相关数据
耶斯莫鱼拉的博客
08-19 1111
Vant Weapp第三方组件库​tab标签页通过点击事件获取索引加载相关数据
vue vant不同tab切换加载更多且返回来后内容不改变的实现
jjw_zyfx的博客
04-02 2467
vue vant不同tab切换加载更多且返回来后内容不改变的实现
微信小程序中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、付费专栏及课程。

余额充值