[发明专利]基于vue滚动事件的动态锚点的实现方法在审
| 申请号： | 201811406788.0 | 申请日： | 2018-11-23 |
| 公开（公告）号： | CN109508438A | 公开（公告）日： | 2019-03-22 |
| 发明（设计）人： | 裴晓格 | 申请（专利权）人： | 四川长虹电器股份有限公司 |
| 主分类号： | G06F16/958 | 分类号： | G06F16/958;G06F16/955;G06F8/38 |
| 代理公司： | 成都虹桥专利事务所(普通合伙) 51124 | 代理人： | 吴中伟 |
| 地址： | 621000 四*** | 国省代码： | 四川;51 |
| 权利要求书： | 查看更多 | 说明书： | 查看更多 |
| 摘要： | |||
| 搜索关键词： | 锚点 滚动事件 滑动 滚动条移动 计时器功能 函数计算 生命周期 用户点击 钩子 滚动条 子组件 监听 平滑 触发 跳转 分段 样式 激活 移动 创建 | ||
1.基于vue滚动事件的动态锚点的实现方法，其特征在于，包括：
锚点的实现和平滑跳转：在vue表单的父组件中增加类名作为钩子，在其子组件中设置函数，通过将offset的值赋给Scroll，实现锚点的功能；当用户点击锚点的时候，通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小；将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动；
动态锚点的状态更改：在创建vue实例的时候，在vue生命周期中mounted阶段设置scroll函数，当用户滑动滚动条的时候，触发scroll函数计算滚动条移动的距离，通过对比从而确认此时对应激活的锚点，完成对于锚点css样式的修改。
2.如权利要求1所述的基于vue滚动事件的动态锚点的实现方法，其特征在于，所述通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小，将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动，具体包括：
在元素子组件中通过函数计算得到此时scroll和offset的值，计算两者的差值；若差值为正，将该差值除以设计所要移动的次数，用scroll的值减去所得到的数字，将浏览器的计时器设置合适的时间，依次完成所有的次数，实现向上滑动；若差值为负，则将该差值除以设计所要移动次数获取的值加上scroll的值，在计时器下依次完成每一段移动，实现向下滑动。
该专利技术资料仅供研究查看技术是否侵权等信息，商用须获得专利权人授权。该专利全部权利属于四川长虹电器股份有限公司，未经四川长虹电器股份有限公司许可，擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作，请联系【客服】
本文链接：http://www.vipzhuanli.com/pat/books/201811406788.0/1.html，转载请声明来源钻瓜专利网。
