详解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代码
Aug 04 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
微信小程序中使用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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
Javascript的比较汇总
2016/07/25 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
vuex实现简易计数器
2016/10/27 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
如何使用python写截屏小工具
2020/09/29 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
物流管理专业职业生涯规划书
2014/01/06 职场文书
甜点店创业计划书
2014/01/27 职场文书
会计专业导师推荐信
2014/03/08 职场文书
收款授权委托书
2014/10/02 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2014年公务员工作总结
2014/11/18 职场文书