vue 同页面内的 tab切换，怎么保持各自的滚动距离？

最新推荐文章于 2023-11-03 17:09:57 发布
最新推荐文章于 2023-11-03 17:09:57 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： vue 文章标签： 列表 vue css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43586648/article/details/107543628
版权

在这里插入图片描述
如图所示，三个列表，你是不是也发现了，看了一个列表，去其他列表，滚动距离竟然都一样，崩溃吧，
其实这个现象很容易理解：他们是一个页面啊，我们在用手指滑动的是整个页面，
在这里插入图片描述
这就是我们的四个列表啦，此时你是不是已经知道怎么解决了？
没错，我们只单独滑动当前列表，也就是这个div盒子不就好啦？有时候我们只是把东西想的过于复杂了
在这里插入图片描述
给每个盒子设置固定高度，两行css搞定！！
有问题随时联系我哦，下一篇讲，不同页面如何保持滚动距离
在这里插入图片描述

段友吊缠腰
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
切换tab动态加载不同的html页面,关于tab的切换之共用html页面,而引发的页面跳转错乱问题...
weixin_39618956的博客
06-05 826
在一个项目中的同一个模块中，有多个tab(并且多个tab对应的页面结构完全一样),tab的每次切换，不同tab调用不同的接口，利用一个switch进行判断，根据当前的类型去调用不同的接口，返回不同数据了，实现页面数据的刷新，这样做的目的是为了减少html页面的重复，实现代码的复用...........................(存在的问题，每次的页面刷新，只是数据的刷新，url没有进行更新，...
vue2.0路由切换后页面滚动位置不变BUG的解决方法
01-19
最近项目中遇到这样一个问题，vue切换路由，页面到顶端的滚动距离仍会保持不变。 <a>立即试用</a> <router class=db to=/user>个人中心</router> useRightNow(){ if(判断用户存在){ this.$router.push('/user') }else{ this.$router.push(/login) } } 解决办法很简单，如
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
主要介绍了vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用keep-alive切换页面，2种方法实现页面保持滚动位置.zip
11-03
vue使用keep-alive切换页面，2种方法实现页面保持滚动位置 下载后 先 npm i 安装依赖
vue 的路由互相切换时怎么保持当前页面的滚动的距离？最新方案来了
qq_43586648的博客
02-09 677
最近一直有人私信我，反映之前的一篇文章《vue 的路由互相切换时怎么保持当前页面的滚动的距离？》存在问题，今天就贴出来新的思路，还得要自己多思考一下，拒绝CV，确保无问题。 直接贴代码： <van-tabs v-model="active"> <van-tab title="标签 1"> <van-list v-model="loading1" :finished="finished1" f
vue组件之自定义tab切换组件(吸顶、滚动定位)等效果
weixin_45532305的博客
05-26 3430
123
解决vue项目切换页面滚动条保持在切换之前位置，并且body的scrollTop=0
ctf_0226的博客
07-19 470
解决vue项目切换页面滚动条保持在切换之前位置，并且body的scrollTop=0
vue 实现tab切换保持数据状态
10-15
主要介绍了vue 实现tab切换保持数据状态，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue vant不同tab切换加载更多且返回来后内容不改变的实现
jjw_zyfx的博客
04-02 2462
vue vant不同tab切换加载更多且返回来后内容不改变的实现
解决vue项目切换页面滚动条保持在切换之前位置，并且body的 scrollTop=0
秋实的博客
05-26 1324
一开始按照vue-router官方解决方案去解决，但发现根本不管用。发现每次切换拿到的$(document).scrollTop()、$(window).scrollTop()、$("container").scrollTop()等的值都是0。最后受该文章启发，在我的main组件加上： updated() { this.$parent.$el.scrollTop = 0;//表示获取router-view上一级的scrollTop } 重启后立马见效，切换页面滚动条能自动置顶了。 ...
vue滚动tab跟随切换效果
10-16
在Vue.js中实现滚动tab跟随切换效果是一种常见的增强用户体验的交互设计，特别是在移动应用或响应式网站中。这种效果使得用户在浏览长页面时能够轻松地切换不同内容区域。以下将详细讲解如何在Vue中创建这个功能。 ...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
例如，`window.scrollTo(100, 500)`会将滚动条移动到距离页面左侧100像素、顶部500像素的位置。 然而，当涉及到vue-router时，我们可以自定义路由切换时的滚动行为。首先，我们需要在创建VueRouter实例时提供一个`...
同一页，多个滚动组件交叉滚动处理
donggua_123的博客
04-02 1083
最近做一个移动端项目的时候，有一个页面的需求是在同一个页面里，通过导航栏切换出不同的滚动组件，导航栏也要跟着滚动组件一起上下滚动，当导航栏到达顶部时悬浮在顶部，不再随滚动组件一起滚动了，组件则继续向上滚动。如图所示：进入页面状态：  向上滚动：              到达顶部：导航栏悬浮 刚开始结构上导航栏、顶部展示区和底部主体区域是一个滚动整体，判断滚动距离，当距离大于顶部展示区时，将导航栏...
Vue3实现页面缓存，切换tab页面保持不变
qq_42264030的博客
11-16 5324
tab页面切换保存不更新（缓存）
vue 的路由互相切换时怎么保持当前页面的滚动的距离？
qq_43586648的博客
07-23 828
子路由是长列表，滚动某到一个位置后，再进入其他页面，然后再点击进入页面，滚动距离消失，重新回到了顶部： 首页 ，活动，我的，分别为子路由的三个页面，如果首页是新闻，刷到十几条数据后，去了我的页面，然后再返回首页新闻列表，数据回到了顶部，是不是很崩溃， 我的解决： 箭头指的分别记录初始位置，也就是 0，在页面内，我们上划看新闻的时候，要实时记录滚动距离，如下图所示： activated 可以简单理解为 设置keep-alive的缓存组件进入页面触发。此时的this.route,可以访问到进入页面的路由数
VUE3实现页面缓存，tab切换时不刷新
jiujiuyibai的专栏
06-22 4199
如上图所示，为了实现页面缓存，防止每次页面切换时重新刷新数据，前前后后尝试了多种写法，如上图被注释的那段写法，与没注释掉的写法，在router-view上主要是第一种写法有设置key属性，第二种没有，后面经过调试发现，在router-view上设置key属性，会导致keep-alive不生效。
vant-tab 切换不同的tab，页面滚动一致
最新发布
u014105739的博客
11-03 1414
再次返回第一个界面，会发现第一个界面这个时候也回到了顶部，反正不管怎么切换滑动，每个页面的滚动距离都会收到其他界面的影响，会滑动到相同的距离，vant-tab 切换不同的tab, 假如第一个tab下的界面滑动了一段距离， 点击第二个界面初次加载，最后发现是vant-tab 的所有tab 都使用的是同一个滚动条，就是都是最外面的滚动条。解决方法：每个tab界面使用自己的单独滚动条避免此类问题。
vant 2：van-tabs组件标签切换时滚动位置不准的问题
weixin_48226213的博客
07-21 2003
本文简要介绍了关于vue.js移动端开源组件库：vant 2的van-tabs组件标签切换时滚动位置不准的问题和处理方案。
vue3+vite配置全局scss
热门推荐
qq_43586648的博客
04-02 1万+
首先下载scss，sass-loader，sass npm install --save-dev sass-loader npm install --save-dev node-sass npm install --save-dev sass 打开vite.config.ts,添加下边代码，并重启服务 module.exports = { cssPreprocessOptions: { scss: { additionalData: '@import "./src/assets/
vue3 n-tab-pane 切换保持位置
06-04
在 Vue3 中，`n-tab-pane` 组件需要使用 `el-tabs` 组件进行包裹，而在 `el-tabs` 中可以使用 `v-model` 绑定选中的选项卡，然后可以通过监听 `change` 事件来获取当前选项卡的位置。因此，在 Vue3 中实现 `n-tab-pane` 切换时保持原来位置的功能，可以按照以下步骤进行： 1. 在 `el-tabs` 组件上添加 `v-model` 绑定选中的选项卡，并绑定一个变量，例如： ``` <el-tabs v-model="activeTab"> ``` 2. 在组件的 `mounted` 生命周期中，读取并记录当前选项卡的位置，例如： ``` mounted() { // 读取当前选项卡的位置 const position = sessionStorage.getItem(`tab${this.activeTab}Position`); // 如果有位置记录，则滚动到相应位置 if (position) { this.$nextTick(() => { const tab = this.$refs[`tab${this.activeTab}`]; tab.$el.scrollTop = position; }); } } ``` 3. 在组件的 `activated` 生命周期中，重新设置当前选项卡的位置，例如： ``` activated() { // 读取之前记录的位置 const position = sessionStorage.getItem(`tab${this.activeTab}Position`); // 如果有位置记录，则滚动到相应位置 if (position) { this.$nextTick(() => { const tab = this.$refs[`tab${this.activeTab}`]; tab.$el.scrollTop = position; }); } } ``` 4. 在 `el-tabs` 组件上添加 `change` 事件监听，例如： ``` <el-tabs v-model="activeTab" @change="handleChangeTab"> ``` 5. 在组件中定义 `handleChangeTab` 函数，用于记录当前选项卡的位置，例如： ``` handleChangeTab() { // 记录当前选项卡的位置 sessionStorage.setItem(`tab${this.activeTab}Position`, this.$refs[`tab${this.activeTab}`].$el.scrollTop); } ``` 通过以上步骤，就可以实现 `n-tab-pane` 切换时保持原来位置的功能了。需要注意的是，以上代码中的 `tab` 和 `activeTab` 都需要根据实际情况进行修改。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值