美文网首页初见程序员
Vue 列表页点击记录滚动位置,返回后回到之前位置

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

作者: 香蕉你个菠萝 | 来源:发表于2020-05-27 17:09 被阅读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);
    },

相关文章

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

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

  • vue下返回顶部功能实现

    vue下返回顶部功能实现 Vue中点击按钮回到顶部(滚动效果) vue中回到顶部 vue滚动到一定位置显示置顶元素...

  • 路由跳转后跳转回来保留滚动条位置

    移动端页面H5,在列表页,点击跳到详情页,再按浏览器的返回键,回到列表页,需要保持滚动条原位置。 过程:1.一开始...

  • Vue返回记住滚动条位置

    Vue返回记住滚动条位置 vue 项目返回上一页,滚动到离开时的位置,网上能找到不少方法,以下尝试一种。 一共分三...

  • Vue 返回记住滚动条位置详解

    最近用 Vue 做移动端页面遇到一个问题,从列表页进入详情页,再返回到列表页,不管之前滚动到哪里,每次返回时都跳到...

  • react上拉加载

    react上拉加载(元素,滚动条在元素上) js css 下次将列表页进入详情页之后,返回时,记录进入时的位置~~~

  • vue 记录浏览位置

    vue中记录上浏览位置的方法场景描述: 在当前页面浏览时,点击进入其他页面,再返回时希望滚动到浏览时的位置 解决方...

  • vue2路由之指定滑动位置scrollBehavior

    移动端开发当出现列表页是,下拉刷新到底部,然后点击某条数据进入到详情页,然后点击返回,回到上次列表页滑动的位置,这...

  • H5本地存储—sessionStorage

    用户在一个列表页浏览时,点击一个列表进入详情页,返回要求记录用户刚刚浏览的位置,而不是重新刷新页面到了页面顶部。(...

  • jQuery点击锚点平滑滚动

    点击锚点平滑滚动到相应页面位置: .. "返回顶部"按钮效果:向下滚动页面出现 按钮,点击返回顶部。 …………EN...

网友评论

    本文标题:Vue 列表页点击记录滚动位置,返回后回到之前位置

    本文链接:https://www.haomeiwen.com/subject/cdtgahtx.html