详解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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
js模拟微博发布消息
Feb 23 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
JS将unicode码转中文方法
May 08 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
vue判断按钮是否可以点击
Apr 09 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
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python正则表达式完全指南
2017/05/25 Python
python中defaultdict的用法详解
2017/06/07 Python
Python切片操作实例分析
2018/03/16 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Python 实现try重新执行
2019/12/21 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
煤矿班组长的职责
2013/12/25 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
商务英语专业求职信
2014/06/26 职场文书
大型公益活动策划方案
2014/08/20 职场文书
2014年班主任工作总结
2014/11/08 职场文书
运动会加油稿
2015/07/22 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技