keepAlive保存滚动位置

选项式保存位置

HoemView.vue

  data() {return {scTop: 0//滚动距离顶部的位置}},// 进入该路由时activated() {document.documentElement.scrollTop = this.scTop},// 离开该路由前beforeRouteLeave(to, from, next) {this.scTop = document.documentElement.scrollTop || 0next()},

组合式保存位置

<script setup>
import {onActivated } from "vue";import {onBeforeRouteLeave} from 'vue-router';// 离开该路由前
onBeforeRouteLeave(() => {HomeList.scrollTopVal = document.documentElement.scrollTop||0
})// 进入该路由时
onActivated(() => {document.documentElement.scrollTop =  HomeList.scrollTopVal
})
</script>

end

2022/12/28 一次修改

【Vue3】vue3的keepAlive保存滚动位置相关推荐

vue3缓存页面keep-alive+路由统一处理
一.前言当使用路由跳转到其他页面的时候,要求缓存当前页面,比如列表页面跳转到详情页面,需要缓存列表内容,并且保存滚动条位置,也有时候需要缓存的页面里面有部分内容不缓存,总之各种情况,下面就列举其中一 ...
vue项目中keep-alive的使用，从详情页返回列表时保存浏览位置
背景描述: 最近在做移动端前端项目中,需要实现以下场景: 1.在页面查询列表,进入详情页时,返回需要页面返回到上次浏览的位置 2.由于查询列表获取的数据可能会短时间改变,如果前端长时间缓存数据,并不符 ...
vue使用keep-alive缓存页面回到滚动位置
业务场景:移动端一个列表页下拉到某个位置时,点击其中一条数据进入详情页,再从详情页返回列表页时,还是在原来的位置. 实现: 1.在App.vue中加上keep-alive缓存组件. <keep- ...
vue3+ts+el-tabs+keep-alive
vue3+ts+el-tabs+keep-alive 先写一下我的需求,那就是tabs切换页,普普通通的切换页也就算了,但是得加上keep-alive缓存,加上缓存也就算了 ,而且这个要切换的tabs ...
vue3调用百度地图标注选择位置并获取经纬度
vue3调用百度地图标注选择位置并获取经纬度参考了很多文章,最终结合百度文档各有采取完成地图选取经纬度. 第一步:引入百度地图,在当前需要地图的页面引入就行. const loadMapScript ...
scrollTop记录滚动位置
前文提到,需要记录滚动位置, vue-router提供了一个方法 scrollBehavior,但是这个方法必须要在history模式下才能使用,具体参考文档使用的方式如下 const scroll ...
vue 记录滚动位置_vue 路由跳转记住滚动位置，返回时回到上次滚动位置
方法一: 利用Keep-Alive和监听器 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive:t ...
android expandablelist 自动滚动,在ExpandableListView中，如何保留滚动位置_android_开发99编程知识库...
在一些实验之后我做了一个满意的解决,它还保留了很好的滚动位置顶部可见项. 事实上,三种不同部分的信息需要保存和恢复: 状态( e .g列表. 其中组被展开),第一个可见项的索引和优良滚动位置. 不幸的 ...
bscroll 滚动位置_better-scroll初始滚动位置
1.某些业务需求,需要缓存之前选择的滚动位置.例如记录当前选择列表li的索引,下一次访问该页面的时候初始滚动到该索引.请问better-scroll里面有没有什么好方法?我调用自带的scrollToE ...

【Vue3】vue3的keepAlive保存滚动位置

keepAlive保存滚动位置

选项式保存位置

组合式保存位置

【Vue3】vue3的keepAlive保存滚动位置相关推荐

最新文章

热门文章