Vue 返回记住滚动条位置详解
最近用 Vue 做移动端页面遇到一个问题,从列表页进入详情页,再返回到列表页,不管之前滚动到哪里,每次返回时都跳到列表最顶部。
这样体验肯定不好,期望的应该是记住滚动条的位置,每次返回还是在原来的位置上,便于继续浏览。
于是在网上搜解决方法,搜了一大圈看了 n 篇文章,都没有说清楚。起码我是没有通过看一篇文章而完美解决,所以决定写一篇详细的亲测可行的解决方案。
一共分三步:
- 给 router-view 添加 keep-alive
- 获取并存储当前 scrollTop
- 返回时取出并设置 scrollTop
100
多位经验丰富的开发者参与,在 Github 上获得了1000+
个star
的全栈全平台开源项目想了解或参与吗?
项目地址:https://github.com/cachecats/coderiver
一、给 router-view 添加 keep-alive
先贴出 keep-alive 官方文档,不熟悉的可以先看看文档。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。所以在由详情页返回列表页时,不让列表页刷新。
当组件在 <keep-alive>
内被切换,它的 activated
和 deactivated
这两个生命周期钩子函数将会被对应执行。
设置 scrollTop
时是在 activated
方法里,有些文章说获取 scrollTop
在 deactivated
方法里,但经过测试,在 deactivated
方法里并不能准确的获取 scrollTop
值,每次都是 0。具体原因暂时不深究,先解决问题。所以把获取 scrollTop
值放在 item 的点击事件函数里执行。
二、获取并存储当前 scrollTop
页面布局如下:
整个页面是一个 <rounter-view>
,下面又分了两个 tab,我们列表页是一个组件,位于 title 和 导航栏之间的区域。
布局代码:
<div class="wrapper" ref="wrapper"><div class="title">我是标题</div><van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh"><van-listref="list"class="list"v-model="loadingMore":finished="finished"finished-text="没有更多了"@load="onLoadMore"><div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item"><div class="item">{{item}}</div></div></van-list></van-pull-refresh></div>
复制代码
用到了 Vant-ui 的下拉刷新和上拉加载更多组件。
可以看到我一共给了四个 ref
,分别是最外层的 ref="list"
,下拉刷新组件 van-pull-refresh
的 ref="pullRefresh"
,列表组件 van-list
的 ref="list"
,和每个 item 的 ref="item"
。
为什么给出这么多呢?因为这里有个大坑,也是我一直卡住的地方。
我们知道获取滚动位置是用 scrollTop
这个属性,下面我们就依次打印出这几个元素的 scrollTop
。
clickItem(item) {let wrapperScrollTop = this.$refs.wrapper.scrollTop;let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;let listScrollTop = this.$refs.list.scrollTop;let itemScrollTop = this.$refs.item.scrollTop;console.log('wrapperScrollTop', wrapperScrollTop);console.log('pullRefreshScrollTop', pullRefreshScrollTop);console.log('listScrollTop', listScrollTop);console.log('itemScrollTop', itemScrollTop);this.$router.push({name: "detail", params: {data: item}})
},
复制代码
放到 item 的点击事件里触发。得到的日志如下:
WTF?只有第一个 wrapperScrollTop
有值,其他的都 undefined
!
我也不知道为啥,之前一直是获取后三者的 scrollTop
,一直获取不到,纠结了好久。为什么其他三个获取不到我现在还没整明白,知道原因的大佬可以指点一下。
知道了该获取哪一个元素的 scrollTop
就简单了,得到值只需存储起来即可。
因为使用了 keep-alive
,页面被缓存起来了,所以 data
里的数据不会丢失,可以在 data
中声明一个变量 scroll
存储 scrollTop
的值。也可以使用 Vuex。
修改下 clickItem(item)
的代码,将 scrollTop
的值存储起来。
clickItem(item) {let wrapperScrollTop = this.$refs.wrapper.scrollTop;let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;let listScrollTop = this.$refs.list.scrollTop;let itemScrollTop = this.$refs.item.scrollTop;console.log('wrapperScrollTop', wrapperScrollTop);console.log('pullRefreshScrollTop', pullRefreshScrollTop);console.log('listScrollTop', listScrollTop);console.log('itemScrollTop', itemScrollTop);//存储 scrollTop 的值this.scroll = wrapperScrollTop;this.$router.push({name: "detail", params: {data: item}})
},
复制代码
三、返回时取出并设置 scrollTop
上面已经介绍过了,使用 keep-alive
之后,每次返回页面会调用 activated
生命周期方法,所以在这个方法里设置之前记住的 scrollTop
,达到记住滚动位置的效果。
代码很简单,只有一句话:
activated() {this.$refs.wrapper.scrollTop = this.scroll
}
复制代码
完整的代码如下:
<template><div class="wrapper" ref="wrapper"><div class="title">我是标题</div><van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh"><van-listref="list"class="list"v-model="loadingMore":finished="finished"finished-text="没有更多了"@load="onLoadMore"><div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item"><div class="item">{{item}}</div></div></van-list></van-pull-refresh></div>
</template><script>export default {components: {},created() {},mounted() {for (let i = 0; i < 15; i++) {this.list.push(i)}},data() {return {list: [], //列表数据loadingMore: false, //加载更多是否显示加载中finished: false, //加载是否已经没有更多数据isRefresh: false, //是否下拉刷新scroll: 0,}},activated() {this.$refs.wrapper.scrollTop = this.scroll},deactivated() {},methods: {clickItem(item) {let wrapperScrollTop = this.$refs.wrapper.scrollTop;let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;let listScrollTop = this.$refs.list.scrollTop;let itemScrollTop = this.$refs.item.scrollTop;console.log('wrapperScrollTop', wrapperScrollTop);console.log('pullRefreshScrollTop', pullRefreshScrollTop);console.log('listScrollTop', listScrollTop);console.log('itemScrollTop', itemScrollTop);this.scroll = wrapperScrollTop;this.$router.push({name: "detail", params: {data: item}})},onRefresh() {this.list = [];this.finished = false;setTimeout(() => {for (let i = 0; i < 15; i++) {this.list.push(i)}this.isRefresh = false}, 2000)},//加载更多onLoadMore() {console.log('load more')let newList = [];for (let i = this.list.length; i < this.list.length + 15; i++) {newList.push(i)}this.list = this.list.concat(newList)this.loadingMore = false;if (this.list.length > 50) {this.finished = true}},}}
</script><style scoped lang="scss">@import "../../public/css/index";.wrapper {width: 100%;height: calc(100vh - 100px);overflow-x: hidden;box-sizing: border-box;margin-bottom: px2rem(50);.title{font-size: px2rem(20);padding: px2rem(10);}.list {width: 100%;flex: 1;display: flex;flex-direction: column;box-sizing: border-box;.item-wrapper {display: flex;flex-direction: column;font-size: px2rem(16);margin: px2rem(8);padding: px2rem(8);background-color: white;.item {font-size: px2rem(16);padding: px2rem(10);}}}}
</style>
复制代码
好了,以上就是 Vue 返回记住滚动条位置的详解。
全栈全平台开源项目 CodeRiver
CodeRiver 是一个免费的项目协作平台,愿景是打通 IT 产业上下游,无论你是产品经理、设计师、程序员或是测试,还是其他行业人员,只要有好的创意、想法,都可以来 CodeRiver 免费发布项目,召集志同道合的队友一起将梦想变为现实!
CodeRiver 本身还是一个大型开源项目,致力于打造全栈全平台企业级精品开源项目。涵盖了 React、Vue、Angular、小程序、ReactNative、Android、Flutter、Java、Node 等几乎所有主流技术栈,主打代码质量。
目前已经有近 100
名优秀开发者参与,github 上的 star
数量将近 1000
个。每个技术栈都有多位经验丰富的大佬坐镇,更有两位架构师指导项目架构。无论你想学什么语言处于什么技术水平,相信都能在这里学有所获。
通过 高质量源码 + 博客 + 视频
,帮助每一位开发者快速成长。
项目地址:https://github.com/cachecats/coderiver
您的鼓励是我们前行最大的动力,欢迎点赞,欢迎送小星星✨ ~
Vue 返回记住滚动条位置详解相关推荐
- keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处 在做电商有关的项目中 ...
- 服务器隔板在哪个位置好,客厅空调摆放在哪个位置好?客厅空调正确摆放位置详解...
原标题:客厅空调摆放在哪个位置好?客厅空调正确摆放位置详解 客厅放一部空调,在炎热的夏季是少不得的.那么,客厅空调摆放在哪个位置好呢?小牛装修的小编现在就为大家介绍下. 一.客厅空调摆放注意事项 1. ...
- vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式 在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
- java 接口 返回值_java api返回值的标准化详解
api返回值的标准化 例如 {"status":200,"message":"操作成功","data":"{\ ...
- php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
- python多维数组添加元素_numpy中三维数组中加入元素后的位置详解
今天做数据处理时,遇到了从三维数组中批量加入二维数组的需求.其中三维数组在深度学习的特征数据处理时经常会使用到,所以读者有必要对该小知识点做到清楚了解并掌握.现对三维数组中的元素位置结合代码做详细归纳 ...
- 一起来捉妖找不到服务器,一起来捉妖妖怪分布大全 所有妖灵不同地点位置详解...
一起来捉妖中的妖灵众多,这些妖灵都是分布在各个地方,就是不知道这些妖灵是分别分布在哪些地方,下面小编就给玩家带来一起来捉妖妖怪分布大全的内容,一起来看看吧! 妖怪分布 [1]最初的伙伴 最初的伙伴,在 ...
- Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
- Vue 中的 ref 属性详解
Vue 中的 ref 属性详解 我们先来读一下vue的官方文档 我们来分析官方文档 首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
- 《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
前端权限控制 - 潘正 - 博客园 https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...
最新文章
- HTML5基础-Mark标签高亮显示文本
- Vue.2.0.5-模板语法
- ViewController类中得方法和属性的用途
- mysql 日期查询今天_Mysql 日期查询今天、昨天、近7天、近30天、本月、上一月、本季...
- Python外(1)--try-expect
- add(1)(2)(3) add(1,2)(3)
- java lambda教程_Lambda系列教材 (一)- Java Lambda 表达式教程
- Javascript之旅——第十站:为什么都说闭包难理解呢?
- Win7主题制作教程 电脑主题制作图文方法
- 1079:计算分数加减表达式的值
- rpm包与deb包的制作过程
- 使图片充满整个ImageView的方法
- 手机banner图片自适应手机宽高定位
- P1240 诸侯安置 [dp]
- 微博图片作者识别功能,找到发图的人
- 两个数字交换的三种方法
- 为影驰主板运行Windows11开启fTPM2.0(Intel PTT)可信计算支持
- SiT9365:超低抖动0.23ps差分晶振,LVPECL/LVDS/HCSL
- 山西工程职业技术学院计算机,山西工程职业技术学院
- 纯文本笔记软件Simplenote Mac
热门文章
- TOMCAT内存大小调整
- Search Engine -垂直搜索小汇总
- msxml3.dll error '80072efd' 错误的解决办法
- opensaml2.0 java例子_OpenSAML 使用引导 I : 简介——关于OpenSAML你所需知道的一切
- i12单双耳切换_“摸一摸”,乐在其中 | 雷柏i100蓝牙TWS耳机,主从切换,可单耳使用,也可双耳使用...
- 比对字段判断字段是否为空,合并列字段(合并多列)
- Golang1.71.3下载以及安装(Linux Mac Windows)
- PHP实现下载远程图片保存到本地的方法
- grafna监控Java接口_性能测试之 JVM 的监控 Grafana
- 疫情核酸检测,应考虑使用刷身份证的方式