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

╰半橙微兮° 2022-12-31 11:19 216阅读 0赞

如下所示：

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”

使用例子：

![Image 1][]

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

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpriteKit之浅谈AnchorPoint(锚点)的使用

> 理想如果不向现实做一点点屈服，那么理想也将归于尘土。 ![f7223c8d6708b2a7a14dc7abd57c61a3.png][] 锚点的简介

╰+哭是因爲堅強的太久メ/ 2023年01月05日 05:23/ 0 赞/ 112 阅读

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

如下所示： export default \{ inserted: function(el, binding) \{ el.onclick = function() \{

╰半橙微兮°/ 2022年12月31日 11:19/ 0 赞/ 217 阅读

相关锚点的使用

我们可以理解锚点为一种超链接，只不过它是网页内部的超链接。我们可以利用它跳转到网页内指定的位置使用技巧: <div id="sa" name="sa">我是锚点，哈哈

ゝ一世哀愁。/ 2022年07月19日 11:58/ 0 赞/ 225 阅读

相关 html锚点

锚点是网页制作中超级链接的一种，又叫[命名锚记][Link 1]。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。英文名：anchor 使用命名锚记可以

亦凉/ 2022年06月07日 08:41/ 0 赞/ 235 阅读

相关 HTML锚点的使用

一、页面内跳转的锚点设置页面内的跳转需要两步：方法一： ①：设置一个锚点链接<a href="\miao">去找喵星人

ゞ浴缸里的玫瑰/ 2022年05月18日 04:19/ 0 赞/ 218 阅读

相关 vue项目锚点的使用

在vue项目中如何使用锚点呢？在vue-router中定义 scrollBehavior scrollBehavior (to, from, savedPosition)

我会带着你远行/ 2021年12月15日 13:57/ 0 赞/ 355 阅读

相关 Vue锚点定位

<div class="tab0" id="selector"> </div> 1.以下是js原生的scroll 滚动方式 //锚点

谁借莪１个温暖的怀抱￠/ 2021年09月24日 06:42/ 0 赞/ 454 阅读

相关锚点

$('.kk').on('click', function(e) { var thisId = $(this).attr('id');

男娘i/ 2021年09月19日 11:16/ 0 赞/ 416 阅读

相关 Vue锚点链接

锚点链接是我们在开发中经常会用到的一个技术点，常见的常见有，页面内容过多，而我们不希望拿鼠标一直来回滚动，就需要用到锚点链接，以 " 目录 " 的方式来进行对应的跳转。而在

心已赠人/ 2021年09月18日 20:18/ 0 赞/ 453 阅读

相关 html 锚点

锚点: 在一张网页中进行资源跳转 <a href="锚点名">点击访问名称</a> 跳转到锚点name处 <a name=

我不是女神ヾ/ 2021年07月24日 22:22/ 0 赞/ 466 阅读