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

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

  • 自然人独资企业有公司章程吗
  • 进口货物增值税纳税人是谁
  • 税中税是多少
  • 环保税的纳税义务人是施工方还是建设方安徽
  • 借款合同印花税减免优惠政策2023
  • 组成计税价格公式消费税
  • 纳税申报操作流程
  • 房产公司售楼部装修费入什么会计科目
  • 控股子公司增资扩股
  • 纳税申报财务报表上期数
  • 增值税专用发票和普通发票的区别
  • 向金融企业借款利息支出可以税前扣除吗
  • 进口货物关税计入成本吗
  • 预交税费怎么做分录
  • 专项维修资金的,由县级
  • 可转换债券发行主体
  • 负债减少在什么方
  • 票据追索权向谁追索
  • 营改增的会计分录
  • 多付工资计入哪个科目
  • 专用发票离线限额是什么意思
  • 金税服务费会计分录
  • 比赛奖金支出计入什么科目
  • 公司给员工发工资用途怎么写
  • 增值税普票当月开错了怎么办
  • 民间非营利组织会计科目
  • 计提小规模增值税的账务处理
  • 呆账催讨原则是谁提出的
  • 商事账簿编制的一般规则是什么
  • 听证方式有几种
  • 汇兑损益 纳税调整
  • 电脑运行时cpu温度
  • linux系统添加静态路由命令
  • type3插件
  • 苹果macOS 13.3 RC 发河北承德市承德县华夏电器
  • 远程访问群晖nas
  • phpemail正则
  • 所得税减免要做账吗
  • 网络分割算法
  • php框架基础教程
  • 小微企业年收入超过300万按多少缴纳所得税
  • 企业所得税应纳税额的计算公式
  • Python中自定义异常
  • sqlserver怎么用
  • 哪些行业不用交税
  • 公司自用咖啡机怎么处理
  • 债权投资和其他债权投资举例
  • 个人所得缴税租金怎么算
  • 长期股权投资大白话解释
  • 会计和税法折旧年限不相同
  • 交易性金融资产公允价值变动怎么算
  • 固定资产一次性扣除后第二年账务处理
  • 实收资本可以以现金入账吗
  • 疫情防控重点保障企业名单
  • 出差补助没有发票
  • 预收账款和预付账款怎么理解
  • 施工单位购买材料能直接进成本吗
  • 企业年度财务报告的保管期限为
  • Win7x64下Mysql5.7.18解压版的安装方法
  • mysqli修改表中数据
  • Win7旗舰版系统文件名称
  • bios setup在哪里
  • 进程是什么 进程类型
  • win7笔记本触摸板怎么用滑轮
  • vsftp命令
  • linux的命令行怎么打开
  • css优化提高性能的方法有哪些
  • JavaScript—window对象使用示例
  • android!
  • unity读取fbx文件
  • AppWidgetProvider使用介绍
  • shell脚本spool
  • python生成随机数表
  • 孙其功陪你学之——unity3d进程暂停
  • android退出功能
  • s='python is beautiful!'
  • kmp算法理解
  • js字段截取
  • 税务局网上申请开票
  • 四川税务服务大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设