vue3利用store实现记录滚动位置的示例

目录
  • 整体效果
  • 监听容器滚动事件
  • store中的配置
  • 在页面跳回时获取滚动位置
  • 最后

整体效果

在首页列表进行滚动浏览时进入详情页后，切换回首页时可以定位到之前浏览的位置。

监听容器滚动事件

定义一个滚动事件，绑定到容器的滚动事件上,我这里做了一下节流

const savePosY = () => {
      if(state.timer) return;
      state.timer = setTimeout(() => {
        let node = document.querySelector(".contentWrapper")；
        //记录滚动位置
        store.commit("setY",node.scrollTop)
        state.timer = null;
        clearTimeout(state.timer);
      },100)

在mounted中获取到容器进行绑定事件

onMounted(() => {
    let contentWrapper = document.querySelector(".contentWrapper");
    contentWrapper.addEventListener("scroll",savePosY);
})

store中的配置

store中比较简单，仅包含一个state：y 以及 mutations：setY

export default {
    state:{
         y:0
    },
    mutations:{
        setY(state,value){
            state.y = value;
        }
    }
}

在页面跳回时获取滚动位置

同样在onMounted中操作，否则获取不到容器元素,而且由于vue中dom是异步渲染，所以我们需要在nextTick中操作才有效果

nextTick(() => { contentWrapper.scrollTop = store.state.y; })

最后

以上就是本文的全部内容啦，如果有写的不对或者有更好的方法，欢迎大家交流指出

以上就是vue3利用store实现记录滚动位置的示例的详细内容，更多关于vue 实现记录滚动位置的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

  • vue中进入详情页记住滚动位置的方法(keep-alive)

    > 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require(['../view/scrollDemo.vue'], resolve) } } 2.在App.vue中设置缓存组件 <

  • 解决Vue页面固定滚动位置的处理办法

    最近做项目遇到一个问题,就是Vue滚动不固定,网上找了一些资料,说下 vue 固定滚动位置的处理办法. 问题描述: 通常见于 列表页List -> 详情页Detail 的情况, 从列表的某一项x 进入到详情页, 再返回的时候, 希望列表的位置固定在x, 而不是回到顶部了. vue-router 里面是有一个 scrollBehavior 的, 但是这个玩意只能在 history 模式下面使用, 而我用的 hash 模式. 所以我们要自己实现嘛, 思路简单:List 里面监听滚动, 记录滚动位置

  • vue scroller返回页面记住滚动位置的实例代码

    1,设置keepAlive:是否缓存 router: { path: '/actlist', name: 'actlist', component: actlist, meta: { keepAlive: true } } 2,设置渲染页面 app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <rout

  • 解决vue无法设置滚动位置的问题

    问题描述 在实现锚点定位的时候发现无法设置滚动条的位置. 在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度. document.body.scrollTop一直是0 原因 因为vue的页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement. 页面没有DTD,即没指定DOCTYPE时,使用document.body. 解决方案 document.documentElement=956 总结 以上所述是小编给大家

  • Vue中keep-alive 实现后退不刷新并保持滚动位置

    什么是KeepAlive? 首先,我们要明确我们谈的是TCP的 KeepAlive 还是HTTP的 Keep-Alive.TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念,不能混为一谈.实际上HTTP的KeepAlive写法是Keep-Alive,跟TCP的KeepAlive写法上也有不同. TCP的keepalive是侧重在保持客户端和服务端的连接,一方会不定期发送心跳包给另一方,当一方端掉的时候,没有断掉的定时发送几次心跳包,如果间隔发送几次,对方都返回的是RST,

  • vue-scroller记录滚动位置的示例代码

    问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置.这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现. 还有一种更简单粗暴的方法, vue-scroller.min.js源码中添加宽高不为零判断,实现方式见评论,是最近代码优化的时候发现的. 代码部分: beforeRouteEnter(to,from,next){ if(

  • vue3利用store实现记录滚动位置的示例

    vue3利用store实现记录滚动位置的示例

    目录 整体效果 监听容器滚动事件 store中的配置 在页面跳回时获取滚动位置 最后 整体效果 在首页列表进行滚动浏览时进入详情页后,切换回首页时可以定位到之前浏览的位置. 监听容器滚动事件 定义一个滚动事件,绑定到容器的滚动事件上,我这里做了一下节流 const savePosY = () => { if(state.timer) return; state.timer = setTimeout(() => { let node = document.querySelector("

  • element的el-table中记录滚动条位置的示例代码

    场景重现:在项目中使用了keep-alive来缓存组件,且使用element中的table列表,但在项目中是对table进行了二次封装,跟页码合在了一起.按照网上的直接对scrollTop赋值,赋值失败了,还要加上setTimeout才能成功,虽然实现了功能,但是不知道原因,可以的话希望有人能解答. 废话少说,直接赋上代码. <template> <div class="table"> <el-table ref="table">

  • Android简单记录和恢复ListView滚动位置的方法

    本文实例讲述了Android简单记录和恢复ListView滚动位置的方法.分享给大家供大家参考,具体如下: 有时候我们需要记录当前ListView滚动到的位置,重新加载的时候要回到原位,不罗嗦,给出代码: //列表滚动 private OnScrollListener ScrollLis = new OnScrollListener() { @Override public void onScroll(AbsListView arg0, int arg1, int arg2, int arg3)

  • Vue.js实现页面后退时还原滚动位置的操作方法

    目录 开始 目录结构 安装模块 route规则 code社区api为例子 总结 前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet.它以规则来驱动状态更新,它带来的是开发效率上的飙升,它就像草原,而你是野马,任你随意驰骋,总之它是为敏捷开发而诞生. 缘由 在大型的Vue应用程序开发中,多组件通信.多页面通信,往往是跨不过的坎,一个页面组件中往往参杂着页面获取数据的代码和响应用户操作的代码,稍有不慎,就使得代码混乱不堪.A.B.C三个

  • javascript 获取模态窗口的滚动位置代码

    实验了一下午,到现在终于解决的了模态窗口的滚动位置获取办法,现在来分享一下, 其实很简单,给你的弹出模态窗口的div块设置一个id, 在js中通过 document.getElementById('divID').scrollLeft 这样获取的是向右滚动的值 同理,scrollTop 就是向下滚动的值, 其实很简单,那就说到这里

  • android开发实现列表控件滚动位置精确保存和恢复的方法(推荐)

    Android开发经常要对列表的滚动位置进行保存和恢复,网上也有很多关于此功能的方法文章,但绝大多数都只能保存恢复到某一行,对于滚动到半行的情况不能精确的恢复.也有很多文章介绍了好几种方法,也说某些方法能够精确的控制,但实际上根本不能实现.还有些介绍了很多玄乎且非常复杂的方法,但也没看到能完整实现的代码. 经过一段时间的研究测试,下面的代码可以完美的实现列表滚动位置的精确保存和恢复,而且只是在原来记忆到行位置的基础上增加了2行代码而已. 具体见下面代码和注释: //保存位置: int posit

随机推荐