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

如下所示：

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的使用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持谷谷点程序。

anchor锚点 antvue_浅谈vue 锚点指令v-anchor的使用相关推荐

浅谈Vue.js的优势
写在前面今天小梦跟小伙伴们简简单单聊一下Vue.js的优势.小梦也是刚刚接触Vue.js,在学习一门新的技术之前,我们当然要了解其优势,知道优势在哪更加有利于我们去学习并转换为自己的储备. 浅谈Vu ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
java get请求数组,浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...
浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...
浅谈vue的前世今生
在近几年的web及项目开发中,从社会使用的普遍度以及受欢迎度,vue技术的使用越来越普遍,其各种资料.介绍以及使用攻略内容资料非常多,那么vue到底什么?它的发展历程又是什么样,其中又有那些改变和优 ...
SpriteKit之浅谈AnchorPoint(锚点)的使用
理想如果不向现实做一点点屈服,那么理想也将归于尘土. 锚点的简介在SpriteKit的游戏开发当中经常会使用到AnchorPoint这一属性,锚点的使用一般是配合着position属性使用的,锚点是 ...
浅谈VUE全家桶（Vue、VueX、Vue-Router、axios、Vue-cli）的理解与认识
1.Vue veu是一个渐进式的 .专注于视图层的前端开发框架,通过数据驱动和组件化的方式实现了高效的前端开发 ,既可以通过文件引入的方式在普通页面中被引入使用,也可以基于webpack等构建系统结 ...
浅谈 Vue 项目优化
前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题基础优化所谓的基础优化是任何 web 项目都 ...

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

anchor锚点 antvue_浅谈vue 锚点指令v-anchor的使用相关推荐

最新文章

热门文章