浅谈vue 锚点指令v-anchor的使用


Posted in Javascript onNovember 13, 2019

如下所示:

export default {
  inserted: function(el, binding) {
    el.onclick = function() {
      let total;
      if (binding.value == 0) {
        total = 0;
      } else {

        total = document.getElementById(`anchor-${binding.value}`).offsetTop;
      }
      let distance = document.documentElement.scrollTop || document.body.scrollTop;
      let step = total / 50;
      if (total > distance) {
        (function smoothDown() {
          if (distance < total) {
            distance += step;
            document.documentElement.scrollTop = distance;
            setTimeout(smoothDown, 5);
          } else {
            document.documentElement.scrollTop = total;
          }
        })();
      } else {
        let newTotal = distance - total;
        step = newTotal / 50;
        (function smoothUp() {
          if (distance > total) {
            distance -= step;
            document.documentElement.scrollTop = distance;
            setTimeout(smoothUp, 5);
          } else {
            document.documentElement.scrollTop = total;
          }
        })();
      }

    }
  }
}

1、封装一个anchor.js

2、在入口文件中定义

//定义锚点跳转 
Vue.directive(‘anchor', anchorFunc);

3、页面中使用方式

v-anchor = “传入的value”

使用例子:

浅谈vue 锚点指令v-anchor的使用

以上这篇浅谈vue 锚点指令v-anchor的使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
JavaScript手机振动API
Jun 11 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
Jquery异步上传文件代码实例
Nov 13 #jQuery
解决ele ui 表格表头太长问题的实现
Nov 13 #Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 #Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 #Javascript
JavaScript数组及常见操作方法小结
Nov 13 #Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 #Javascript
javascript操作元素的常见方法小结
Nov 13 #Javascript
You might like
php实现的漂亮分页方法
2014/04/17 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
js 省地市级联选择
2010/02/07 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
react 生命周期实例分析
2020/05/18 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
python输出数学符号实例
2020/05/11 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
pymysql模块使用简介与示例
2020/11/17 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
教师专业理论水平的自我评价分享
2013/11/09 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
委托书格式范文
2015/01/28 职场文书
销售经理岗位职责
2015/01/31 职场文书
工程部经理岗位职责
2015/02/02 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
行政处罚告知书
2015/07/01 职场文书