建网站制作,知名网站建设,图床网站怎么做,wordpress 腾讯云cdn背景描述#xff1a;
最近在做移动端前端项目中#xff0c;需要实现以下场景#xff1a;
1.在页面查询列表#xff0c;进入详情页时#xff0c;返回需要页面返回到上次浏览的位置
2.由于查询列表获取的数据可能会短时间改变#xff0c;如果前端长时间缓存数据#xf…背景描述
最近在做移动端前端项目中需要实现以下场景
1.在页面查询列表进入详情页时返回需要页面返回到上次浏览的位置
2.由于查询列表获取的数据可能会短时间改变如果前端长时间缓存数据并不符合业务要求。
3.我在进入详情页时可以修改列表的数据返回时滚动到用户看到的应该是最新的数据
4.每个列表页面需要用到滑动加载更多数据。
项目中vue的使用
1.用到keep-alive来缓存页面
2.当详情页中改变列表数据时配合keep-alive,需要在vue钩子函数activated中对数据进行更改
3.在从其他页面进入时页面要重新加载数据。页面从列表进入其他页面非详情页时销毁当前的vue实例。此时需用到组件内的路由守卫beforeRouteEnter和beforeRouteLeave
4.列表页滑动加载
具体实现
针对以上前三点页面的缓存我们需要用到vue的内置组件keep-alive来缓存列表页面同时配合路由选项来更改页面的数据。
在设置keep-alive缓存的组件中首次进入组件会一次调用组件的钩子函数created -- mounted --activated 再次进入时只触发activated钩子函数
1.在路由出口渲染组件时配置 keep-aliverouter-view v-if$route.meta.keepAlive classrouter-view/router-view/keep-aliverouter-view v-if!$route.meta.keepAlive classrouter-view /router-view2.在路由选项中配置meta属性keepAlive为true即为需要缓存的组件同时设置isBack属性用来标示页面是否是从详情页面返回的。
{name: 首页,path: index,component: Index,meta: {keepAlive: true, isBack: false}},3.在组件实例中通过beforeRouteEnter(to, from, next)路由守卫来判断路由是从哪里跳转的如果是从详情页跳转的则将当前路由对象的meta.isBack 设置为true,否则设为false beforeRouteEnter(to, from, next) {if (from.path /detail) {to.meta.isBack true;} else {to.meta.isBack false;}next();},为了在其他页面进入时更新页面中的列表数据我们将在activated钩子函数中挂载页面初次进入时的请求数据 activated() {if (!this.$route.meta.isBack) {this.list [];this.pageNum 1;this.getList();}this.$route.meta.isBack false;},4.在进入详情页需要对该条数据进行修改时修改成功后返回应该更新列表。
由于我们要在返回时滚动到浏览位置因此不能去后台重新请求数据(否则无法回到之前浏览的位置)而是采用前端保存修改的数据并在返回的activated钩子中对当前列表数据修改。
需要注意的事项
由于vue自身限制不能检测到数组直接修改长度和利用索引设值 因此需要使用vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)
然后根据页面离开时保存的滚动位置将页面滚动到浏览位置。在router-view入口处watch$route对象将keep-alive为true的页面滚动到上次浏览位置。
5.在页面列表中我们需要用到分页加载数据即滑动加载
在keep-alive组件中页面离开时并不会销毁当前的vue实例而是保存在内存中。因此就会造成问题页面跳转时触发了滑动事件加载所有保存在内存中的滑动事件改变了vue实例的数据。
因此我们需要在组件的路由守卫中在页面离开时beforeRouteLeave中把滑动事件禁用然后再在页面进入的时候在activated钩子中恢复滑动事件的。
注意 使用keep-alive不能销毁实例,vm.$destroy(); 否则再进入页面即使keep-alive为true也不会保存组件。如果keep-alive的页面较多可以使用,在路由守卫中修改vuex的变量动态改变keep-alive的页面变量。
简单写了个demo用的移动端ui框架是vux,其中用到的view-box组件有自己的scroll方法documment.documentElement.scroll为0
https://github.com/Cxy56/vue-keepalive-demo
