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

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

一.实现思路

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

首页&＃xff1a;

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

//进入搜索页面时
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;