滚动行为 缓存之前的位置

2024-08-22 22:20

本文主要是介绍滚动行为 缓存之前的位置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

开发中的问题:
场景1 在用前端路由,当切换到新路由时,想要页面滚动到顶部,或者保持原先滚动位置,就像重新加载页面那样。
场景2 在一个很长的列表页往下拉,然后点击列表中的某一数据进入到详情页查看。此时决定返回列表也继续查看列表。很多情况下,由于列表页的组件已经被销毁,所以我们返回到列表页面会置顶,不得不重新下拉查看列表,这样就做了很多没有必要的操作,也是不符合用户的预期。

滚动行为
通过vue-router自定义路由切换时页面如何滚动。当跳转新路由时,页面滚动到某个位置;切换路由时页面回到之前的位置。

// srcollBehavior 方法
const router = createRouter({history: createWebHashHistory(), // createWebHistory 是 Vue Router 提供的一种基于浏览器 history API 的路由模式routes:[...],srcollBehavior(to, from, savedPositon){// return 期望滚动到哪个的位置}
})

srcollBehavior 方法接收 to 和 from路由对象,第三个参数savedPositon 当且仅当 popstate导航(通过浏览器前进/后退按钮触发)时才可用。
return{ x:number, y:number} // 来控制页面滚动的位置
对于所有路由导航,简单地让页面滚动到顶部。

srcollBehavior (to, from, savedPositon ){return {x:0,y:0}
}
// 或
const router = createRouter({scrollBehavior(to, from, savedPosition) {// 始终滚动到顶部return { top: 0 }},
})

新增异步滚动:
当页面数据需要请求加载延迟的情况下,页面如果直接滚动,会出现滚动后,页面数据请求回来,DOM重新渲染,滚动失效。

scrollBehavior(to, from, savedPosition){return new Promise((resolve,reject)=>{setTimeour(()=>{resolve({x:0,y:0})},500)})
}

滚动到元素位置
可以通过 el 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下,top 和 left 将被视为该元素的相对偏移量。

const router = createRouter({scrollBehavior(to, from, savedPosition) {// 始终在元素 #main 上方滚动 10pxreturn {// el: document.getElementById('main'),el: '#main',top: -10,}},
})

滚动到锚点位置

const router = createRouter({scrollBehavior(to, from, savedPosition) {if (to.hash) {return {el: to.hash,}}},
})

滚动到之前的位置
在按下浏览器 后退/前进 按钮,或者调用 router.go() 方法时,页面会回到之前的滚动位置:

const router = createRouter({scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { top: 0, behavior: 'smooth' }}},
})
// 如果返回一个false的值,或者是一个空对象,则不会发生滚动。我们还可以在返回的对象添加behavior:‘smooth’,让滚动更加丝滑。

scrollIntoView()
如果想要在特定的按钮点击事件中实现平滑滚动可以使用 scrollIntoView 方法。scrollIntoView()将调用它的元素滚动给到浏览器窗口的可见区域顶部。

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); //布尔参数。接受布尔值主要还是为了兼容不支持平滑滚动(老版)的浏览器
element.scrollIntoView(scrollIntoViewOptions); //对象参数
参数:
alignToTop:true时,相当于{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}; false时,相当于{behavior: ‘auto’, block: ‘end’, inline: ‘nearest’}; 未传入参数时,默认值为:{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}
scrollIntoViewOptions:一个包含下列属性的对象。

使用缓存,即不销毁列表页

// APP.js中
<template><div id="app"><!-- <router-view/> --><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive" /></div>
</template>
// router.js中routes: [{path: '/',name: 'List',//component: Listcomponent: () => import('./views/index/list.vue'),meta: {keepAlive: true // 需要缓存}},{path: '/content/:contentId',name: 'content',component: () => import('./views/index/content.vue'),meta: {keepAlive: false // 不需要缓存}},
]

使用路由守卫
原理就是在beforeRouterLeave的路由钩子记录当前页面滚动位置。

//在页面离开时记录滚动位置,这里的this.scrollTop可以保存在vuex的state或者浏览器本地
beforeRouteLeave (to, from, next) {this.scrollTop = document.documentElement.scrollTop || document.body.scrollTopnext()},//进入该页面时,用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {next(vm => {document.body.scrollTop = vm.scrollTop})},

这篇关于滚动行为 缓存之前的位置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1097562

相关文章

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

如何通过Golang的container/list实现LRU缓存算法

《如何通过Golang的container/list实现LRU缓存算法》文章介绍了Go语言中container/list包实现的双向链表,并探讨了如何使用链表实现LRU缓存,LRU缓存通过维护一个双向... 目录力扣:146. LRU 缓存主要结构 List 和 Element常用方法1. 初始化链表2.

一文详解Nginx的强缓存和协商缓存

《一文详解Nginx的强缓存和协商缓存》这篇文章主要为大家详细介绍了Nginx中强缓存和协商缓存的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、强缓存(Strong Cache)1. 定义2. 响应头3. Nginx 配置示例4. 行为5. 适用场景二、协商缓存(协

Golang基于内存的键值存储缓存库go-cache

《Golang基于内存的键值存储缓存库go-cache》go-cache是一个内存中的key:valuestore/cache库,适用于单机应用程序,本文主要介绍了Golang基于内存的键值存储缓存库... 目录文档安装方法示例1示例2使用注意点优点缺点go-cache 和 Redis 缓存对比1)功能特性

mysql线上查询之前要性能调优的技巧及示例

《mysql线上查询之前要性能调优的技巧及示例》文章介绍了查询优化的几种方法,包括使用索引、避免不必要的列和行、有效的JOIN策略、子查询和派生表的优化、查询提示和优化器提示等,这些方法可以帮助提高数... 目录避免不必要的列和行使用有效的JOIN策略使用子查询和派生表时要小心使用查询提示和优化器提示其他常

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm

MySQL8.0设置redo缓存大小的实现

《MySQL8.0设置redo缓存大小的实现》本文主要在MySQL8.0.30及之后版本中使用innodb_redo_log_capacity参数在线更改redo缓存文件大小,下面就来介绍一下,具有一... mysql 8.0.30及之后版本可以使用innodb_redo_log_capacity参数来更改

MySQL 缓存机制与架构解析(最新推荐)

《MySQL缓存机制与架构解析(最新推荐)》本文详细介绍了MySQL的缓存机制和整体架构,包括一级缓存(InnoDBBufferPool)和二级缓存(QueryCache),文章还探讨了SQL... 目录一、mysql缓存机制概述二、MySQL整体架构三、SQL查询执行全流程四、MySQL 8.0为何移除查

golang1.23版本之前 Timer Reset方法无法正确使用

《golang1.23版本之前TimerReset方法无法正确使用》在Go1.23之前,使用`time.Reset`函数时需要先调用`Stop`并明确从timer的channel中抽取出东西,以避... 目录golang1.23 之前 Reset ​到底有什么问题golang1.23 之前到底应该如何正确的

Redis缓存问题与缓存更新机制详解

《Redis缓存问题与缓存更新机制详解》本文主要介绍了缓存问题及其解决方案,包括缓存穿透、缓存击穿、缓存雪崩等问题的成因以及相应的预防和解决方法,同时,还详细探讨了缓存更新机制,包括不同情况下的缓存更... 目录一、缓存问题1.1 缓存穿透1.1.1 问题来源1.1.2 解决方案1.2 缓存击穿1.2.1