工作章vue组件返回时保留滚动的位置

最近做项目时遇到一个问题&＃xff0c;产品搜索后出来相关的列表&＃xff0c;点击相关商品进入它的详情&＃xff0c;返回后组件被重新创建&＃xff0c;但产品需求是需要保留进入详情是列表的位置的。

一.实现思路

首先有三个页面&＃xff08;首页&＃xff0c;搜索列表页&＃xff0c;详情页&＃xff09;&＃xff0c;从首页到搜索列表页是不需要保存组件的&＃xff0c;从详情页到搜索列表页是需要记录列表位置的。

首页&＃xff1a;

&＃xff08;搜索页&＃xff1a;从首页来&＃xff09;

&＃xff08;搜索页&＃xff1a;详情页来&＃xff09;

1.先保持搜索列表页组件状态不刷新

2.从首页进来,组件不刷新,会导致列表存在,而我们的需求是列表是不能存在的,因此利用vue-router的组件内的守卫beforeRouteEnter在渲染该组件的对应路由时把列表清空。

//进入搜索页面时 beforeRouteEnter(to, from, next) {console.log(to,from);if (from.path &＃61;&＃61; &＃39;/&＃39;) {console.log("/");next(vm &＃61;> {vm.seachlist&＃61;[]; //清空搜索列表vm.keyword&＃61;""; //清空关键字});} },

3.从详情页进入搜索列表页时&＃xff0c;列表存在&＃xff0c;但列表位置不在离开的位置&＃xff0c;所以我们需要在离开时记录离开时滚动的位置&＃xff0c;并将列表滚动到相应的位置。

记录位置&＃xff1a;

//初始化better-scrollinitbetterscore:function () {this.scroll &＃61; new Bscroll(this.$refs.mescroll, {scrollY:true,pullUpLoad:true,click:true,})this.scroll.on(&＃39;pullingUp&＃39;,()&＃61;>{this.getseachlist();})//监听scroll的滚动&＃xff0c;获取它滚动的高度this.scroll.on(&＃39;scroll&＃39;,(obj)&＃61;>{this.scrollTop&＃61;obj.y;})},

设置位置&＃xff1a;

//进入该页面时beforeRouteEnter(to, from, next) {console.log(to,from);if (from.path &＃61;&＃61; &＃39;/&＃39;) {console.log("/");next(vm &＃61;> {vm.seachlist&＃61;[];vm.keyword&＃61;"";});} else {next(vm &＃61;> {vm.scroll.scrollTo(0,vm.scrollTop);vm.scroll.refresh(); //重新计算 better-scroll&＃xff0c;当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常})}},

效果图&＃xff1a;

以上就是自己的决解方法&＃xff0c;欢迎留言指教哦&＃xff01;