位置: 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旅游网页设计)

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

  • 闲鱼的担保账户在哪(闲鱼的担保账户是什么意思)

    闲鱼的担保账户在哪(闲鱼的担保账户是什么意思)

  • b150主板支持7代cpu吗(b150m主板支持cpu)

    b150主板支持7代cpu吗(b150m主板支持cpu)

  • 编码器的作用是(直流编码电机中编码器的作用是)

    编码器的作用是(直流编码电机中编码器的作用是)

  • 闲鱼卖家可以拒绝退货吗(闲鱼卖家可以拒收吗)

    闲鱼卖家可以拒绝退货吗(闲鱼卖家可以拒收吗)

  • 微信可以发压缩包吗(微信可以发压缩文件不)

    微信可以发压缩包吗(微信可以发压缩文件不)

  • 手机淘宝和淘宝特价版的区别(手机淘宝和淘宝是一个账号吗)

    手机淘宝和淘宝特价版的区别(手机淘宝和淘宝是一个账号吗)

  • 微信离线消息保存多久(微信离线提醒在哪设置?)

    微信离线消息保存多久(微信离线提醒在哪设置?)

  • 小米内存不足如何调整(小米内存不足如何扩容)

    小米内存不足如何调整(小米内存不足如何扩容)

  • 如何设置黑名单提示音(如何设置黑名单短信收不到)

    如何设置黑名单提示音(如何设置黑名单短信收不到)

  • 手机系统升级后没有声音了,怎么解决(手机系统升级后开不了机怎么办)

    手机系统升级后没有声音了,怎么解决(手机系统升级后开不了机怎么办)

  • 三星evo橙卡和红卡区别(三星橙卡为什么贵)

    三星evo橙卡和红卡区别(三星橙卡为什么贵)

  • 手机月租是什么意思(手机月租费根据什么来收费)

    手机月租是什么意思(手机月租费根据什么来收费)

  • 手机很快没电是什么原因(手机很快没电是什么意思)

    手机很快没电是什么原因(手机很快没电是什么意思)

  • 拼多多有多少次免拼机会(拼多多有多少次免拼)

    拼多多有多少次免拼机会(拼多多有多少次免拼)

  • 华为手机怎么清理扬声器灰尘(华为手机怎么清理垃圾缓存)

    华为手机怎么清理扬声器灰尘(华为手机怎么清理垃圾缓存)

  • 快门的定义是什么(何为快门)

    快门的定义是什么(何为快门)

  • vivo手机流量限速怎么解除(vivo手机太卡怎么设置)

    vivo手机流量限速怎么解除(vivo手机太卡怎么设置)

  • 华为p30pro有双扬声器吗(华为p30pro双扬声器吗?)

    华为p30pro有双扬声器吗(华为p30pro双扬声器吗?)

  • 百度百科怎么创建词条(百度百科怎么创建自己要钱吗)

    百度百科怎么创建词条(百度百科怎么创建自己要钱吗)

  • 什么是阈刺激(什么是阈刺激和最适刺激)

    什么是阈刺激(什么是阈刺激和最适刺激)

  • 一加7pro有没有红外线遥控(一加7pro有没有无线充)

    一加7pro有没有红外线遥控(一加7pro有没有无线充)

  • 华为无线耳机一个响一个不响(华为无线耳机一个响一个不响怎么办)

    华为无线耳机一个响一个不响(华为无线耳机一个响一个不响怎么办)

  • 抖音声浪怎么算钱的(抖音声浪提现比例)

    抖音声浪怎么算钱的(抖音声浪提现比例)

  • 手机总是自动安装失败(手机总是自动安装游戏)

    手机总是自动安装失败(手机总是自动安装游戏)

  • 鼠标滚轮上下没有反应(鼠标滚轮上下没有反应,只能左右)

    鼠标滚轮上下没有反应(鼠标滚轮上下没有反应,只能左右)

  • 智联招聘如何屏蔽公司(智联招聘如何屏蔽平台推荐)

    智联招聘如何屏蔽公司(智联招聘如何屏蔽平台推荐)

  • [YOLOv7/YOLOv5系列算法改进NO.11]主干网络C3替换为轻量化网络MobileNetV3(yolov5m)

    [YOLOv7/YOLOv5系列算法改进NO.11]主干网络C3替换为轻量化网络MobileNetV3(yolov5m)

  • c语言中static修饰局部静态变量(c语音中static)

    c语言中static修饰局部静态变量(c语音中static)

  • 多交的企业所得税怎么处理
  • 当月个税申报的是几月的工资表
  • 无形资产摊销月底最后一天怎么算
  • 增值税发票9个点和13个点区别
  • 公户网上转账怎么撤回
  • 员工培训的费用按照多少钱计入安措费
  • 工程类发票项目分类
  • 农产品销售发票可以抵扣吗?
  • 怎么核算关联企业的借款费用?
  • 耗材如何入账
  • 收回以前年度的应收账款,怎么进行账务处理?
  • 冲减往年管理费用
  • 留抵进项税抵欠税后期末未交增值税会减少吗
  • 技术服务年费是什么
  • 公司投资股票有风险吗
  • 虚开发票走账对方不返还如何处理?
  • 3%增值税率包括哪些
  • 外贸企业当期认证的发票没申报影响退税吗?
  • 服务费不开发票可以做无票收入吗?
  • 如何区分纳税人和小规模纳税人
  • 有效期起止时间段与已有备案有效期有交集
  • powershell不显示用户名
  • 自然人独资企业交什么税
  • Win10时间显示到秒
  • 微软发布新的免费 Win11 虚拟机 (2302)
  • windows11邮件
  • PHP mysql_result()函数使用方法
  • 如何去掉电脑桌面背景图
  • 农产品专票可以开零税率吗
  • 固定资产转让出去租赁收入怎么入账
  • 应收票据贴现会计分录怎么做
  • 申报个人所得税是按应发工资还是实发工资
  • 培训学校主营业务成本明细科目设置
  • php中统计单词个数
  • vue项目中技巧知识点
  • vue移动
  • 编程中char什么意思
  • python 3.4.3 shell
  • event loop exception null
  • 增值税发票真假怎么查询
  • 备用金支出没有发票怎么办
  • 开发成本期末有余额吗
  • 总资产报酬率的高低直接影响净资产收益率的高低
  • 分期收款发出商品是什么意思
  • 进口环节增值税额
  • 职工食堂的费用,会计上怎么做账?
  • 专利年费 缴纳
  • 增值税专用发票和普通发票的区别
  • 房地产企业按简易计税
  • 公司报税金额和实际发的不一致可以去告吗?
  • 存货的发出计价方法有哪些
  • 跨年收入冲销如何申报
  • 为什么实收资本不属于企业资产
  • 记账凭证填制完毕
  • 库存股的处理方式
  • 垫付的开办费怎么做账
  • 外账和内账怎么配合做账
  • 支票为什么不能取钱
  • 建账的基本步骤
  • win10 mysql 5.6.35 winx64免安装版配置教程
  • service login
  • windows 专业版10安装后文件会丢失嘛
  • 手机上的安全模式是什么
  • win7安全防护怎么关闭
  • Linux VPN 出现 807 错误的解决办法
  • 深入剖析kubernetes pdf
  • 教你怎样用竹子搭棚子
  • django ajax请求
  • bootstrap需要学多久
  • python的理解
  • opencv for python
  • shell命令怎么用
  • shell脚本 su
  • 广西地方税务局决算公开表
  • 企业吸收合并都包括什么
  • 湖北税务登不上去是怎么了
  • 医生算是公务员吗?
  • 如何查询税控盘是否注销成功
  • 为什么国税网上申报不了
  • 国家个人所得税征收标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设