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

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

  • 只有会议号怎么加入腾讯会议列表(只有会议号怎么添加会议列表)

    只有会议号怎么加入腾讯会议列表(只有会议号怎么添加会议列表)

  • 苹果如何设置连续重拔(苹果如何设置连接电脑)

    苹果如何设置连续重拔(苹果如何设置连接电脑)

  • 存储周期最短的存储器(存储周期最短的是寄存器吗)

    存储周期最短的存储器(存储周期最短的是寄存器吗)

  • mac磁盘已满无法删除(mac磁盘已满无法清空废纸篓)

    mac磁盘已满无法删除(mac磁盘已满无法清空废纸篓)

  • 抖音关注的人排序规则(抖音关注的人排序为什么会变)

    抖音关注的人排序规则(抖音关注的人排序为什么会变)

  • qq群课堂能看到在线时长吗(qq群课堂能看到脸吗)

    qq群课堂能看到在线时长吗(qq群课堂能看到脸吗)

  • 抖音聊天列表没有了(抖音聊天记录怎么不显示了)

    抖音聊天列表没有了(抖音聊天记录怎么不显示了)

  • 企业微信为什么删不掉(企业微信为什么没有消息提醒)

    企业微信为什么删不掉(企业微信为什么没有消息提醒)

  • 苹果11省电模式怎么开(苹果11省电模式怎么弄到控制中心)

    苹果11省电模式怎么开(苹果11省电模式怎么弄到控制中心)

  • 华为p40微信怎么分身(华为P40微信怎么绑定抖音支付)

    华为p40微信怎么分身(华为P40微信怎么绑定抖音支付)

  • 情侣空间error是什么意思(情侣空间check auth failed)

    情侣空间error是什么意思(情侣空间check auth failed)

  • 手机rcs是什么意思(手机rc是什么意思)

    手机rcs是什么意思(手机rc是什么意思)

  • 单元格底纹颜色怎么设置(单元格底纹颜色怎么设置25%)

    单元格底纹颜色怎么设置(单元格底纹颜色怎么设置25%)

  • 苹果11可以设置几个面部(苹果11可以设置4位数密码吗)

    苹果11可以设置几个面部(苹果11可以设置4位数密码吗)

  • 手机连不上数据流量怎么回事(苹果手机连不上数据)

    手机连不上数据流量怎么回事(苹果手机连不上数据)

  • 手机蓝牙怎么连接汽车蓝牙导航(手机蓝牙怎么连接不上)

    手机蓝牙怎么连接汽车蓝牙导航(手机蓝牙怎么连接不上)

  • 华为mate30怎么打开超感光模式(华为mate30怎么打开高清通话)

    华为mate30怎么打开超感光模式(华为mate30怎么打开高清通话)

  • 微信号多久不登录就注销(怎么找到原来的微信号)

    微信号多久不登录就注销(怎么找到原来的微信号)

  • 小米8无法处理指纹(小米无法处理指纹怎么办)

    小米8无法处理指纹(小米无法处理指纹怎么办)

  • 抖音怎么截屏壁纸(抖音如何截屏壁纸)

    抖音怎么截屏壁纸(抖音如何截屏壁纸)

  • 如何下载图虫上的照片(图虫下载要钱吗)

    如何下载图虫上的照片(图虫下载要钱吗)

  • 千库网如何下载图片(千库网如何下载无水印)

    千库网如何下载图片(千库网如何下载无水印)

  • fatal error: opencv/cv.h: 没有那个文件或目录 错误;fatal error: opencv2/contrib/contrib.hpp: 没有那个文件或目录,opencv多版本

    fatal error: opencv/cv.h: 没有那个文件或目录 错误;fatal error: opencv2/contrib/contrib.hpp: 没有那个文件或目录,opencv多版本

  • 最贵的U盘是什么(贵的u盘和便宜的有什么区别)

    最贵的U盘是什么(贵的u盘和便宜的有什么区别)

  • 超适合练手的一套JavaWeb项目 (超市后台管理系统)(适合练手的动漫人物)

    超适合练手的一套JavaWeb项目 (超市后台管理系统)(适合练手的动漫人物)

  • Java web入门:在Idea上创建Java web项目(java webflux)

    Java web入门:在Idea上创建Java web项目(java webflux)

  • 只有增值税专用发票才能抵扣进项吗
  • 小企业会计准则适用于哪些企业
  • 支付税金怎么算
  • 个税新规定2021
  • 本月累计专项扣款怎么算
  • 应收账款余额百分比法会计分录
  • 什么情况下当月不排卵
  • 转账支票开给个人收款人怎么写
  • 个人开的专票也能抵扣吗
  • 结转当月材料采购成本的会计分录怎么做?
  • 购买沙子违法吗
  • 公司购买短期理财现金流量表怎么填
  • 期末调汇的会计怎么做账
  • 没有税率的发票怎么开
  • 公司代缴的个税怎么查询
  • 安全生产费怎么算
  • 关税保险费计算方法
  • 认证成功次月何时补发
  • 应交增值税的结转
  • 物流公司的财务能学到东西吗
  • 个体户跟企业户
  • random_state=123
  • reactjs路由跳转
  • php随机生成1到3的数字
  • php-xml
  • php判断数组是否为空的函数
  • 开源项目有什么用
  • html编写
  • typescripte
  • angular 初学者快速上手教程
  • ghostnet改进
  • diskgenius命令
  • 税收收入退还书有时间限制吗
  • 商业承兑汇票如何查询
  • 年金现值系数和年金终值系数的公式
  • 生产劳务成本会计分录
  • 自产货物进项税抵扣
  • 跨月红字发票开错了可以撤销吗
  • 发票上一定要盖章吗
  • 发票冲红和作废有啥区别
  • 自行建造的固定资产达到预定可使用状态
  • 流动资产损失计入营业外支出吗
  • 建筑劳务公司何去何从
  • 固定资产净残值可以为0吗
  • 预付款被退回分录
  • 长期应付款的会计编号
  • 计提职工薪酬是什么意思
  • 外经证适用范围
  • 出纳去银行存现
  • 未交增值税账务处理
  • 转贴现占谁的授信
  • 投资性房地产的定义
  • 利息收入和应收利息
  • 企业职工福利费支出包括哪些内容
  • 一般纳税人劳务税率是多少?
  • 保险可以税前扣除吗
  • 银行承兑到期后怎么兑现
  • 应收账款坏账准备的会计分录
  • 公司的残保金是分摊到员工身上的吗
  • 预收账款最多挂几年
  • 进项税额转出怎么操作
  • 记账凭证分为哪几类,应具备哪些主要内容
  • win8换win7详细过程
  • windows组合快捷键
  • win7怎么设置麦克风权限
  • win8系统安装的软件在哪里
  • Windows 9 Storage Sense储存功能更多图像
  • 资源管理器操作教程
  • linux没有ssh
  • win10系统自带的浏览器叫什么
  • cocos2dx4.0入门
  • Unity3D游戏开发基础
  • js实现拖拽元素改编顺序
  • angular重新渲染组件
  • android gradle task dependence
  • python 上传文件到ftp
  • android app测试
  • 河南灵活就业缴费截止时间
  • 成都税务二维码扫描
  • 如何进行税务筹划的方法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设