Vue 详情页返回列表页,不刷新页面,并且保留列表页原来滚动条所在位置
前言:最近公司有个移动端H5的项目,是前后端分离的,所以前端就Vue + Vux来做,项目是用vue-cli3生成的,其中就有这样的一个需求,在新闻列表页中向下滑动后,随别打开一个新闻,进入该新闻的详情页面,当看完后,从详情页返回到新闻列表页。这时,列表页重新请求接口数据,重新渲染DOM,而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好,还会影响用户的体验效果。问题分析:...
前言:
最近公司有个移动端H5的项目,是前后端分离的,所以前端就Vue + Vux来做,项目是用vue-cli3生成的,其中就有这样的一个需求,在新闻列表页中向下滑动后,随别打开一个新闻,进入该新闻的详情页面,当看完后,从详情页返回到新闻列表页。这时,列表页重新请求接口数据,重新渲染DOM,而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好,还会影响用户的体验效果。
问题分析:
1、从新闻详情页面返回新闻列表页后,新闻列表页重新渲染了DOM。
2、如果在新闻列表页向下滑动后,才进入新闻详情页面时,返回新闻列表页后滚动条回到最顶上了。
实现思路:
1、通过<keep-alive>容器组件,将页面缓存起来。
2、当路由跳转到其他页面时: beforeRouteLeave()方法,和 beforeRouteEnter()方法, 来记录 和 恢复滚动条的位置。
解决方法:
1、在router.js文件中,给News新闻列表页路由中添加 meta: { keepAlive: true //开启缓存 },代码如下:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Main',
name: 'Main',
component: () => import('../views/Main.vue')
},
{
path: '/',
name: 'News',
component: () => import('../views/News.vue'),
meta: {
keepAlive: true //开启缓存
}
},
{
path: '/Info',
name: 'Info',
component: () => import('../views/Info.vue')
}
]
})
2、在App.vue文件中,在<template>中的<router-view />用<keep-alive>包裹起来,代码如下:
<template>
<div id="app">
<keep-alive>
<!-- 如果当前打开页面的路由中 keepAlive: true (开启了缓存时) -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 如果当前打开页面的路由中 没有 或者为 keepAlive: false (关闭缓存时[默认就是false]) -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
通过以上的两步设置以后,从新闻详情页面再返回新闻列表页时,新闻列表页就不会再重新渲染DOM了。
3、在News.vue页面中,添加以下两个监听方法,用于记录离开新闻列表页面时滚动条所在的位置,当返回新闻列表页面时设置滚动条的位置为之前所记录的值。
// 离开路由之前执行的函数
beforeRouteLeave(to, from, next) {
// 如果在window中出现的滚动条
// this.scroll = window.scrollTop;
// 如果在某个指的元素中出现的滚动条 就在该素中添加ref属性,如:ref="listBox"
this.scroll = this.$refs.listBox.scrollTop;
next()
},
// 进入路由之前执行的函数
beforeRouteEnter(to, from, next) {
next(vm => {
// 如果在window中出现的滚动条
// window.scrollTop = vm.scroll;
// 如果在某个指的元素中出现的滚动条 就在该素中添加ref属性,如:ref="listBox"
vm.$refs.listBox.scrollTop = vm.scroll
})
}
注:我的滑动区域是在指定的div元素中出现的滚动条
通过以上的三步设置以后,从新闻详情页面再返回新闻列表页时,新闻列表页就不会再重新渲染DOM,返回列表页后,滚动条也回到了原来的位置。
扩展:
如何在vue中实时查看滚动条,滚动的位置的值。
mounted() {
// 监听window中滚动条的位置
window.addEventListener('scroll', function(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);
});
// 监听指定某个元表滚动条的位置
document.querySelector('#listBox').addEventListener('scroll', function(){
let scrollTop = this.pageYOffset || this.scrollTop;
console.log(scrollTop);
}
更多推荐
所有评论(0)