详解Vue项目中实现锚点定位


Posted in Javascript onApril 24, 2019

背景

今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面。

详解Vue项目中实现锚点定位

解决

最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果。

<template>
<div class="score-preview-container">
 <div class="content-box">
 <div class="content-page-box">
  <GlobalAnalysis :id="#anchor-0" />
  <ErrorMerge :id="#anchor-1" />
  <DoExercise :id="#anchor-2" />
 </div>
 <div class="nav-button-box">
  <span class="nav-button-fix">
  <div class="nav-button" v-for="(item,index) in buttonArr" :key="index" :class="{active : activeBtn == index}" @click="goAnchor('#anchor-'+index,index)">{{item}}</div>
  </span>
 </div>
 </div>
</div>
</template>

<script>
import { mapActions } from "vuex";
import GlobalAnalysis from "./components/GlobalAnalysis.vue";
import ErrorMerge from "./components/ErrorMerge.vue";
import DoExercise from "./components/DoExercise.vue";
export default {
 name: "score-preview",
 components: { GlobalAnalysis, ErrorMerge, DoExercise },
 data() {
 return {
  buttonArr: ["整体分析", "错题整理", "提分训练"],
  activeBtn: 0
 };
 },
 mounted() {
 this.dataInit();
 },
 methods: {
 ...mapActions("v2-score-preview", [
  "fetchClassScoreData",
  "fetchPersonalReportData",
  "fetchErrorQuestionData",
  "fetchExerciseData"
 ]),
 //初始化
 dataInit() {
  this.fetchClassScoreData();
  this.fetchPersonalReportData();
  this.fetchErrorQuestionData();
  this.fetchExerciseData();
 },
 //锚点跳转
 goAnchor(selector, index) {
  this.activeBtn = index;
  document.querySelector("#app-root").scrollTop = this.$el.querySelector(selector).offsetTop;
 }
 }
};
</script>

另外,参考页面内锚点定位及跳转方法总结文章中的第四种方法,发现使用scrollIntoView()方法也能实现锚点定位的效果。

//锚点跳转
goAnchor(selector, index) {
 this.activeBtn = index;
 this.$el.querySelector(selector).scrollIntoView()
}

以上所述是小编给大家介绍的Vue项目中实现锚点定位详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
jcrop基本参数一览
Jul 16 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
小程序转发探索示例
Feb 19 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
微信小程序中使用echarts的实现方法
Apr 24 #Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 #Javascript
详解微信小程序开发用户授权登陆
Apr 24 #Javascript
微信小程序实现的一键拨号功能示例
Apr 24 #Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 #Javascript
微信小程序实现的图片保存功能示例
Apr 24 #Javascript
vue中的inject学习教程
Apr 24 #Javascript
You might like
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
python 字典(dict)按键和值排序
2016/06/28 Python
python获取引用对象的个数方式
2019/12/20 Python
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
软件测试笔试题
2012/10/25 面试题
实习生自我鉴定
2013/12/12 职场文书
毕业生就业自荐书
2013/12/15 职场文书
预备党员党支部意见
2015/06/02 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
基于angular实现树形二级表格
2021/10/16 Javascript