位置: IT常识 - 正文

vue中记录滚动条位置(vue 滚动条)

编辑:rootadmin
vue中记录滚动条位置 1、方法一

推荐整理分享vue中记录滚动条位置(vue 滚动条),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue怎么拿到滚动条的位置,vue 滚动条,vue滚动到指定位置,有滚动效果,vue记录滚动条位置,vue 记录滚动位置,vue页面滚动事件,vue数据滚动显示,vue数据滚动显示,内容如对您有帮助,希望把文章链接给更多的朋友!

vue中记录滚动条位置(vue 滚动条)

在点击的时候记录滚动条位置,存入本地 再次进入该路由读取滚动跳位置

1、1 跳转时路由存入scroll如果要有多个页面,可以把名称也存进去,这里默认一个页面 methods: { go() { console.log(document.documentElement.scrollTop) localStorage.setItem("scroll", document.documentElement.scrollTop) this.$router.push({path: '/'}) } }复制代码1、2 读取scroll位置再次进入该路由时从本地录取scroll位置

利用scrollBehavior ,在router/index.js中,配置路由中的scrollBehaviors事件

const router = new VueRouter({ mode: 'hash', routes, scrollBehavior(to, from){ if(to.name==='fatherSlot'){ //name为路由名字 return {x:0, y: parseInt(localStorage.getItem('scroll'))}//读取本地的scroll } console.log("to",to,"from",from) }})复制代码2、方法二

利用vue的keep-alive , 使用缓存机制来记录滚动条位置 但是有个缺点,页面刷新后就不记录了,但是简单高效

2、1 配置需要缓存的路由缓存pageA,pageB,里面代码都一样,如演示图一样。pageA,pageC为组件的名字.

html

<keep-alive :include="['pageA','pageC']"> <router-view/> </keep-alive>复制代码2、2 在路由内记录滚动位置

javascript

data() { return { curScrollTop: 0 //记录滚动条位置对象 } }, //此钩子函数会反复触发,是keep-alive特有的钩子函数,取 activated() { document.documentElement.scrollTop = this.curScrollTop || 0 }, //路由离开时的钩子函数,存 beforeRouteLeave (to, from, next) { this.curScrollTop = document.documentElement.scrollTop || 0 next() },
本文链接地址:https://www.jiuchutong.com/zhishi/296204.html 转载请保留说明!

上一篇:html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript(html5旅游网页设计)

下一篇:前端技术搭建飞机大战小游戏(内含源码)(前端工程搭建)

  • 面容id是什么意思(面容id干什么用)

    面容id是什么意思(面容id干什么用)

  • 淘宝确认收货后怎么换货(淘宝确认收货后怎么申请退款)

    淘宝确认收货后怎么换货(淘宝确认收货后怎么申请退款)

  • 户户通无法收到基站(户户通无法收到节目999)

    户户通无法收到基站(户户通无法收到节目999)

  • 戴尔电脑重装系统后无法启动(戴尔电脑重装系统按f几)

    戴尔电脑重装系统后无法启动(戴尔电脑重装系统按f几)

  • QQ怎样扫描文件成电子档(qq怎样扫描文件发送)

    QQ怎样扫描文件成电子档(qq怎样扫描文件发送)

  • 麒麟990和9905g性能对比(麒麟9905g和麒麟9904g性能差距)

    麒麟990和9905g性能对比(麒麟9905g和麒麟9904g性能差距)

  • Excel工作界面主要有哪些组成部分(Excel工作界面主要由什么组成)

    Excel工作界面主要有哪些组成部分(Excel工作界面主要由什么组成)

  • 迅雷不能下载bt种子解决方法(迅雷不能下载小说)

    迅雷不能下载bt种子解决方法(迅雷不能下载小说)

  • 大数据英文怎么说(数据英文怎么表示)

    大数据英文怎么说(数据英文怎么表示)

  • 三星手机为什么安装不了微信(三星手机为什么充不上电)

    三星手机为什么安装不了微信(三星手机为什么充不上电)

  • vivoy85a恢复出厂设置在哪里(vivoy85a恢复出厂设置后还能找回吗?)

    vivoy85a恢复出厂设置在哪里(vivoy85a恢复出厂设置后还能找回吗?)

  • ipad tv电视棒怎么用

    ipad tv电视棒怎么用

  • ios上怎么解压软件(苹果怎么解压软件)

    ios上怎么解压软件(苹果怎么解压软件)

  • 为什么苹果11信息有个感叹号(为什么苹果11信息有个感叹号但是没有信息)

    为什么苹果11信息有个感叹号(为什么苹果11信息有个感叹号但是没有信息)

  • 电脑酷我音乐怎么唱歌(电脑酷我音乐怎么下载)

    电脑酷我音乐怎么唱歌(电脑酷我音乐怎么下载)

  • 电脑上的@怎么输入(电脑上的@怎么打出来)

    电脑上的@怎么输入(电脑上的@怎么打出来)

  • realmex是什么牌子(realme是啥牌的)

    realmex是什么牌子(realme是啥牌的)

  • 快手上限是多少赞(快手上限是多少粉丝)

    快手上限是多少赞(快手上限是多少粉丝)

  • 苹果人脸识别怎么设置(苹果人脸识别怎么设置两个人)

    苹果人脸识别怎么设置(苹果人脸识别怎么设置两个人)

  • frdaloo是什么型号(fod是什么牌子)

    frdaloo是什么型号(fod是什么牌子)

  • 怎样恢复手机照相机(怎样恢复手机照片视频)

    怎样恢复手机照相机(怎样恢复手机照片视频)

  • 打qq电话怎么同时录音(qq通话怎么样)

    打qq电话怎么同时录音(qq通话怎么样)

  • forte.exe是什么进程 有什么作用 forte进程查询(info.exe)

    forte.exe是什么进程 有什么作用 forte进程查询(info.exe)

  • win101909无法连接网络解决方法(win10 1909无法连接到这个网络)

    win101909无法连接网络解决方法(win10 1909无法连接到这个网络)

  • 在dedecms织梦模板文章内容页调用关键词增加链接(如何用织梦在本地搭建网站)

    在dedecms织梦模板文章内容页调用关键词增加链接(如何用织梦在本地搭建网站)

  • 收到政府的补贴收入现金流量表填哪里
  • 什么是消费税的计税销售额?价外费用是什么?
  • 消费税到底是什么
  • 小微企业做什么
  • 原材料入库汇总单
  • 2021年停车费税率
  • 取暖补贴国家标准
  • 机票的差额发票可以报销吗
  • 溢价发行股票的账务处理
  • 劳服企业可以安差额税上税吗?
  • 用银行本票结算材料货款
  • 投资收益在什么科目
  • 免交的增值税怎么退
  • 小规模纳税人购进商品的会计分录
  • 企业资产损失会计处理
  • 业主委员会的收益
  • 其他收益小企业会计报表没有怎么填
  • 办公室出租中介公司
  • 打车进项可以抵扣吗
  • 车船税没发票只在备注可以计入管理费用吗
  • 临时工工资单怎么做
  • 个人所得税的征收
  • 工会经费的银行怎么入账
  • 电脑重装win7系统后无法连接网络
  • u盘做的启动盘在哪里
  • linux命令“ln file1 file2”的含义是
  • 企业并购的基本方法有
  • 固定资产的税务筹划
  • 电脑eb是什么意思
  • PHP:zip_entry_open()的用法_Zip函数
  • 非营利组织免税资格公示
  • 应收款项减值的核算方法
  • 来料加工企业转型是转成两个企业吗
  • 绿化管理服务经营范围
  • php面向对象优点,缺点
  • springboot jni
  • Visual studio 2019 社区版下载和安装
  • 发票纳税人识别号错了怎么解决
  • 原材料暂估入库成本结转处理
  • 一笔购入多项固定资产
  • 电子发票额度余额怎么查
  • mysql语句性能优化
  • 期初余额调整怎么做凭证
  • 外购产品用于职工福利企业所得税视作销售吗
  • 个人所得税的减免政策有哪些
  • 移动平均加权法怎么算
  • 企业年度所得税怎么算
  • 财务费用报销流程图word
  • 用友部门核算项目核算
  • 车间装修预算表
  • 小数点引起小数大小变化
  • 融资租赁租金会计科目
  • 公司购买的机票可以退吗
  • 电影院分成比例
  • 长期债券是长期借款吗
  • 需要分摊的费用怎么做账
  • 公对私转账有没有手续费
  • 年初要新建帐套吗
  • winxp如何增加c盘空间
  • win10升级最新版
  • win8怎么系统重装系统
  • win10系统没有关机选项
  • Windows 7 Apache下计算机无法访问局域网网站的解决方法
  • android substrate
  • linux升级python2.7
  • perl执行shell命令
  • jquery validation
  • 解析几何
  • oracle批处理语句
  • python如何开发
  • BootStrap iCheck插件全选与获取value值的解决方法
  • Python简单格式化时间的方法【strftime函数】
  • jquery easyui有哪些特点
  • 基于javascript的毕业设计选题
  • 陕西省国家税务局刘峰
  • 内蒙古包头税务局客服电话
  • 上海税务局怎么变更财务负责人
  • 个人利息收入属于什么收入
  • 江苏电子税务局网站首页公共服务
  • 威海税务确认平台官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设