详解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 动态添加事件代码
Nov 30 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
localStorage实现便签小程序
Nov 28 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 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
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php文件上传的简单实例
2013/10/19 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
Javascript Math对象
2009/08/13 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
应届生服务员求职信
2013/10/31 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
《云房子》教学反思
2014/04/20 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
汽车转让协议书范本
2014/12/07 职场文书
《火烧云》教学反思
2016/02/23 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL