vue返回上一页面时回到原先滚动的位置
时间:2022-06-16
本文章向大家介绍vue返回上一页面时回到原先滚动的位置,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。
思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:
(1).在App.vue中加入:
<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"></router-view>
</div>
</template>
(2).index.js页面
export default new Router({
routes: [{
path: '/',
name: 'index',
component: index,
meta: {
keepAlive: true
}
},
这样在index.vue中,mounted方发只走一次,在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试,发现没用,
解决手机上实现目的的方法:
//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
next()
},
//进入该页面时,用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
next(vm => {
document.body.scrollTop = vm.scrollTop
})
},
OK!实现!!
- HDUOJ-------Being a Good Boy in Spring Festival
- Golang语言--slice 切片原理
- GoLang语言--的函数运用
- HDUOJ----John
- 一个SQL性能问题的优化探索(二)(r11笔记第38天)
- HDUOJ---kiki's game
- Golang语言中的多维数组传递
- HDUOJ-----Brave Game
- 事实证明Linux永远是NO.1
- HDUOJ-Counting Triangles
- HDUOJ---三角形(组合数学)
- HDUOJ--Strange fuction
- HDUOJ---Can you solve this equation?
- HDUOJ---A + B Again
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android如何禁止向EditText控件中输入内容详解
- 小程序视角下同构方案思考
- Android基于自带的DownloadManager实现下载功能示例
- Linux服务器搭建nvidia-docker环境过程详解
- Android开发中libs和jinLibs文件夹的作用详解
- Android多线程之同步锁的使用
- android.graphics.Matrix类用法分析
- 使用VSCode和SSH进行远程开发
- Android利用CountDownTimer实现倒计时功能 Android实现停留5s跳转到登录页面
- Android开发之对话框案例详解(五种对话框)
- Linux下一只五颜六色的「猫」
- Android编程实现自定义ImageView圆图功能的方法
- Android开启闪光灯的方法 Android打开手电筒功能
- Android 中ActionBar+fragment实现页面导航的实例
- Android编程之下拉菜单Spinner控件用法示例