热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

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

这篇文章主要介绍了vue3利用store实现记录滚动位置的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下

整体效果

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

监听容器滚动事件

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

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 实现记录滚动位置的资料请关注其它相关文章!


推荐阅读
  • 本文将探讨如何在 Struts2 中使用 ActionContext 和 ServletActionContext 来获取请求参数和会话信息,同时解释它们的内部机制和最佳实践。 ... [详细]
  • RTThread线程间通信
    线程中通信在裸机编程中,经常会使用全局变量进行功能间的通信,如某些功能可能由于一些操作而改变全局变量的值,另一个功能对此全局变量进行读取& ... [详细]
  • 作为一名新手开发者,我正在尝试使用 ASP.NET 和 Vue.js 构建一个单页面应用,涉及多个复杂组件(如按钮、图表等)。希望有经验的开发者能够提供指导。 ... [详细]
  • 深入理解Java多线程与并发机制
    本文探讨了Java多线程和并发机制的核心概念,包括多线程类的分类、执行器框架、并发容器及控制工具。通过详细解析这些组件,帮助开发者更好地理解和应用多线程技术。 ... [详细]
  • Spring 中策略模式的应用:Resource 接口详解
    本文探讨了在 Spring 框架中如何利用 Resource 接口实现资源访问策略。Resource 接口作为资源访问策略的抽象,通过多种实现类支持不同类型的资源访问。 ... [详细]
  • Java EE 平台集成了多种服务、API 和协议,旨在支持基于 Web 的多层应用程序开发。本文将详细介绍 Java EE 中的 13 种关键技术规范,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • vue引入echarts地图的四种方式
    一、vue中引入echart1、安装echarts:npminstallecharts--save2、在main.js文件中引入echarts实例:  Vue.prototype.$echartsecharts3、在需要用到echart图形的vue文件中引入:   importechartsfrom"echarts";4、如果用到map(地图),还 ... [详细]
  • 面试题总结_2019年全网最热门的123个Java并发面试题总结
    面试题总结_2019年全网最热门的123个Java并发面试题总结 ... [详细]
  • 使用Tkinter构建51Ape无损音乐爬虫UI
    本文介绍了如何使用Python的内置模块Tkinter来构建一个简单的用户界面,用于爬取51Ape网站上的无损音乐百度云链接。虽然Tkinter入门相对简单,但在实际开发过程中由于文档不足可能会带来一些不便。 ... [详细]
  • 本文介绍了 Python 中的基本数据类型,包括不可变数据类型(数字、字符串、元组)和可变数据类型(列表、字典、集合),并详细解释了每种数据类型的使用方法和常见操作。 ... [详细]
  • 深入解析Pod中的容器关系
    容器之间的紧密协作如何实现?本文探讨了Kubernetes中Pod的概念及其在处理容器间超亲密关系中的作用。 ... [详细]
  • 通过马老师的视频学习了Java中的容器相关内容,包括Collection、Set、List、Map及其常见实现类,并深入了解了这些容器的基本操作方法。 ... [详细]
  • 直播带货系统中的推流技术详解
    本文介绍了RTMP(实时消息传输协议)及其在直播带货系统中的应用,并详细探讨了带货直播系统的连麦方案,包括服务端合流和客户端合流的优势与劣势。 ... [详细]
  • CSS 百分比单位的取值依据是什么
    本文详细探讨了 CSS 中百分比单位的取值依据,包括不同定位方式下的包含块概念及其应用。通过具体的示例和代码,帮助读者更好地理解和掌握这一知识点。 ... [详细]
  • Docker 环境下 MySQL 双主同步配置指南
    本文介绍了如何在 Docker 环境中配置 MySQL 的双主同步,包括目录结构的创建、配置文件的编写、容器的创建与设置以及最终的验证步骤。 ... [详细]
author-avatar
sotoloraboin_678
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有