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

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

一.实现思路

首先有三个页面（首页，搜索列表页，详情页），从首页到搜索列表页是不需要保存组件的，从详情页到搜索列表页是需要记录列表位置的。

首页：

（搜索页：从首页来）

（搜索页：详情页来）

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

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

//进入搜索页面时
beforeRouteEnter(to, from, next) {
        console.log(to,from);
        if (from.path == '/') {
            console.log("/");
            next(vm => {
                vm.seachlist=[];    //清空搜索列表
                vm.keyword="";      //清空关键字
            });
        } 
    },
复制代码

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

记录位置：

        //初始化better-scroll
        initbetterscore:function () {
            this.scroll = new Bscroll(this.$refs.mescroll, {
                scrollY:true,
                pullUpLoad:true,
                click:true,
            })
            this.scroll.on('pullingUp',()=>{
                this.getseachlist();
            })
            //监听scroll的滚动，获取它滚动的高度
            this.scroll.on('scroll',(obj)=>{
                this.scrollTop=obj.y;
            })
        },
复制代码

设置位置：

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

效果图：

以上就是自己的决解方法，欢迎留言指教哦！

转载于:https://juejin.im/post/5c999238e51d4550752529c6