详解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 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
微信小程序转发事件实现解析
Oct 22 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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 CKEditor 上传图片实现代码
2009/11/06 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
python之Socket网络编程详解
2016/09/29 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
python 实现汉诺塔游戏
2020/11/28 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
Java程序员面试题
2013/07/15 面试题
资深生产主管自我评价
2013/09/22 职场文书
金融专业应届生求职信
2013/11/02 职场文书
给交警的表扬信
2014/01/12 职场文书
食品安全检查制度
2014/02/03 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
快递员岗位职责
2014/09/12 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
付款证明模板
2015/06/19 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
python - timeit 时间模块
2021/04/06 Python
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python