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

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

如下所示:

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” 

使用例子:

attachments-2020-07-QDY5BBwj5f15b0eb161ef.jpg

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Garmcrypto7undop 0 文章