详解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 相关文章推荐
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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
PHP生成静态页面详解
2006/11/19 PHP
用PHP实现的随机广告显示代码
2007/06/14 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
采用call方式实现js继承
2014/05/20 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
什么是python的自省
2020/06/21 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
酒店管理毕业生自荐信
2013/10/24 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
会计稽核岗位职责
2015/04/13 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android