初见程序员

Vue 列表页点击记录滚动位置,返回后回到之前位置

2020-05-27  本文已影响0人  香蕉你个菠萝

如题

准备工作 :
需要的插件 vuex,这里用来存储滚动高度。
第一步:
列表页在路由中加入缓存 keepAlive

 {
        path: "/timeLineAssistant",
        name: "wechat",
        desc: "朋友圈助手",
        component: (resolve) => require(['@/views/wechatAssistant/timeLineAssistant'], resolve),
        meta: {
            keepAlive: true// 需要缓存 
        }
    },

第二步:
找到滚动的div,id为scroll-container。
mounted 方法里获取滚动的高度;data方法里定义一个初始值scroll;

mounted:function(){
   
        //清空下高度
        this.$store.commit("setCurrentScrollTop", '');
    },

第三步:
在跳转页面的方法里,存下滚动的高度:

 //记录下再push
            this.$store.commit("setCurrentScrollTop",$(".scroll-container").scrollTop());
            this.$router.push('/photoSave/'+this.wechatListItem.item.id);

第四步:
activated方法里 滚动到指定位置;记得这个方法里不要去刷新列表!

    activated(){
        //滚到指定高度
        $(".scroll-container").scrollTop(this.$store.state.currentScrollTop);
    },
上一篇 下一篇

猜你喜欢

热点阅读