vue2中切换组件，能够保存滑动的位置分为3步

最新推荐文章于 2024-07-29 11:08:22 发布
最新推荐文章于 2024-07-29 11:08:22 发布
阅读量294 收藏
点赞数 3
文章标签： vue.js 前端 javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love147369/article/details/128932200
版权

  1. 在App.vue中，把需要滑动的那个组件加kepp-alive,图如下

  1. 在router文件中index.js，在需要保存滑动位置的routes添加meta如下图

2.1然后在VueRouter实例上添加scrollBehavior(to,from,savePosition)如下图

3在需要保存滑动的那个组件中使用activated和deactivated生命周期函数如下图

3.1然后在方法methods中定义retop函数 fn=this.retop()调用retop函数 开始把let fn=null

3.2—.debounce()方法是Lodash官网上的一个防抖函数，可用可不用，用的话导入即可如下图

爱编程的love
关注
Vue2实用组件集
m0_56376264的博客
11-21 260
Vue2实用组件集
vue2中函数式组件切换
次顶级的博客
02-17 382
根据传入组件名称，展示不同组件 .js文件，使用时和vue组件文件一样，引入，注册组件，标签使用 import ConversationTpl from './ConversationTpl.vue' import ProblemTpl from './ProblemTpl.vue' import SharesTpl from './SharesTpl.vue' import FileCommentTpl from './FileCommentTpl.vue' import CollectionTpl
vue2，vue3项目无限滚动组件，支持滑动
最新发布
six6de6的博客
07-29 880
把item结构出来然后在设计样式，使用参考类似饿了吗的table。threshold：判断是否需要滚动的项目数量阈值。stepTime：每一步滚动的时间间隔（毫秒）stepHeight：垂直滚动时每一步的高度。stepWidth:水平滚动时每一步的宽度。containerHeight：容器的高度。containerWidth：容器的宽度。fadeInOut：是否启用淡入淡出效果。horizontal：是否水平滚动。items：项目数组。
实现vue2.0组件切换
m0_66809960的博客
02-21 182
组件传值
Vue中组件切换的2种方式
weixin_45616246的博客
04-13 431
请陛下批阅 方式1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件切换方式1</title> <script src="../../vue/vue-v2.6.11.js"></scrip...
【Vue2】动态组件的使用-切换组件和keep-alive，以及异步组件
weixin_44899940的博客
08-15 1827
动态组件的使用-切换组件和keep-alive，以及异步组件。
基于Vue实现页面切换左右滑动效果
08-29
基于Vue实现页面切换左右滑动效果可以提高用户体验，通过使用transition组件、CSS3动画和Vuex状态管理，可以实现页面之间的滑动切换效果。同时，计算滑动方向和计算属性也都是实现该效果的关键组件。
vue实现页面切换滑动效果
10-15
在Vue.js中实现页面切换滑动效果，可以借助Vue的内置组件`transition`以及`vue-router`来完成。`vue-router`用于处理页面间的路由跳转，而`transition`则负责过渡动画效果。以下将详细讲解如何实现这一功能。 首先...
移动端滑动切换组件封装 vue-swiper-router实例详解
10-17
【移动端滑动切换组件封装与Vue-Swiper-Router实例详解】 在移动应用开发中，滑动切换组件是一种常见的交互方式，它允许用户通过左右滑动来浏览不同的内容页面，通常用于实现类似轮播图或者标签页的效果。Vue-...
vue3仿抖音视频滑动切换播放
03-20
在本文中，我们将深入探讨如何使用Vue3框架来实现一个类似抖音的短视频滑动切换播放功能。这个项目涉及的关键技术包括HTML5视频元素、Vue3响应式系统、自定义指令以及可能的第三方库如Vuex（用于状态管理）和Vuetify...
vue-tab-slider:一个Vue组件，可以通过向左或向右滑动屏幕来切换标签
04-27
一个Vue组件，可以通过向左或向右滑动屏幕来切换标签 安装 npm install tab-slider -S 用法 在main.js import TabSlider from 'tab-slider' import 'tab-slider/dist/index.css' Vue . use ( TabSlider ) 在.Vue...
vue2路由之指定滑动位置scrollBehavior-(载转)
dengyidi7792的博客
03-19 309
看源码的时候看到这个属性： 新手自然不知道这个是什么东西了，查了下vue API： https://router.vuejs.org/en/advanced/scroll-behavior.html 上面这个的意思就是当转到一个新的页面时，定位到最顶端。 Scroll Behavior When using client-side routing, we ma...
vue2路由之指定滑动位置scrollBehavior
weixin_34290096的博客
04-24 226
看源码的时候看到这个属性： 新手自然不知道这个是什么东西了，查了下vue API： https://router.vuejs.org/en/advanced/scroll-behavior.html 上面这个的意思就是当转到一个新的页面时，定位到最顶端。 Scroll Behavior When using client-side routing, we may wan...
vue项目解决切换组件滚动位置缺失
weixin_53500514的博客
03-25 572
【目标】记住滚动条的位置，来回切换组件页面在原来的位置显示 先搞清楚问题出在哪： 1.列表滚动为什么会互相影响？ 当滚动时他们不是在自己页面滚动，而是在整个body页面滚动，无论你在A频道还是B频道，都是Body在滚动。 2.如何找到是哪个元素产生的滚动？ 把下面代码粘贴到调试工具，然后滚动页面，就可以查看是哪个元素产生滚动了 function findScroller(element) { element.onscroll = function(){console.log(ele
保存滚动位置的实现方法
qq_39410252的博客
10-01 2259
有的时候从列表页面进入详情页面再返回列表页面，即使使用了keep-alive缓存列表页，也会导致列表页面你的滚动位置发生了变化。两个页面高度不一致导致页面跳转的时候滚动条位置发生了改变；keep-alive不会缓存滚动条的位置。为了解决这个问题我们需要手动的保存列表页面的滚动条位置，并再切换回列表页面的时候滚动到保存的位置。
解决vue2路由切换后滚动条停留在上个页面的位置问题
m0_52685922的博客
10-10 903
【代码】解决vue2路由切换后滚动条停留在上个页面的位置问题。
关于vue的scrollBehavior（滚动行为）、缓存之前的位置
muzidigbig的博客
07-13 4256
咱们在实际开发中会遇到一个问题：我们在一个很长的列表页往下拉，然后点击列表中的某一个数据进入到详情页查看。此时我们决定返回列表也继续查看列表。很多情况下，由于列表页的组件已经被销毁，所以我们返回到列表页后页面会置顶，不得不又重新下拉查看列表，这样就做了很多没有必要的操作，也是不符合用户的预期。用户希望当我查看玩详情页以后返回，返回列表页的位置是刚刚浏览的位置这种情况有什么好的解决办法呢？scrollBehavior scrollIntoView
【vue 页面下滚到目标元素的位置，目标元素自动吸顶（自动悬浮吸附到页面顶部）】
m0_55546349的博客
06-21 906
vue 页面下滚到目标元素的位置，目标元素自动吸顶（自动悬浮吸附到页面顶部）
Vue实现页面滑动切换效果及代码详解
本文将详细介绍如何在Vue项目中实现页面切换滑动效果。首先，确保你已经安装了Vue CLI（使用`npm install -g @vue/cli`）并初始化了一个新项目。接着，引入Vue Router和Vuex，以便管理页面状态和路由。 在项目中，...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值