vue中锚点的三种方法


Posted in Javascript onJuly 06, 2018

第一种:

    router.js中添加

mode: 'history',
       srcollBehavior(to,from,savedPosition){
        if(to.hash){
      return {
    selector:to.hash
     }
      }
     }

    组件:   

<template>
<div>
<ul class="list">
<li><a href="#1" rel="external nofollow" >星期1</a></li>
<li><a href="#2" rel="external nofollow" >星期2</a></li>
<li><a href="#3" rel="external nofollow" >星期3</a></li>
<li><a href="#4" rel="external nofollow" >星期4</a></li>
<li><a href="#5" rel="external nofollow" >星期5</a></li>
<li><a href="#6" rel="external nofollow" >星期6</a></li>
<li><a href="#7" rel="external nofollow" >星期7</a></li>
</ul>
<div class="main_con" id="1">11111111111111111111111111111111</div>
<div class="main_con" id="2">22222222222222222222222222222222222</div>
<div class="main_con" id="3">33333333333333333333333333333333333333</div>
<div class="main_con" id="4">444444444444444444444444444444444444444</div>
<div class="main_con" id="5">555555555555555555555555555555555555555</div>
<div class="main_con" id="6">666666666666666666666666666666666666666</div>
<div class="main_con" id="7">7777777777777777777777777777777777777777</div>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
<style>
.list{
width: 100%;
height: 50px;
}
li{
width: 11%;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #ccc;
color: #ff6c00;
float: left;
list-style: none!important;
}
.main_con{
width: 100%;
height: 200px;
border: 1px solid #ccc;
line-height: 200px;
text-align: center;
color: blue;
}
</style>

第二种:

    写一个方法  组件

<template>
 <div>
  <div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" @click="goAnchor('#anchor-'+index)" v-for="index in 20"> {{index}} </a></div>
  <div :id="'anchor-'+index" class="item" v-for="index in 20">{{index}}</div>
</div>
  </template>
<script>
export default{
data(){
return {
}
},
methods: {
  goAnchor(selector) {
     var anchor = this.$el.querySelector(selector)
     document.documentElement.scrollTop = anchor.offsetTop
  }
 }
}
</script>
<style>
.item{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>

第三种: 自定义指令

<template>
<div>
  <div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-anchor="index" v-for="index in 20"> {{index}} </a></div>
  <div :id="'anchor-'+index" class="item" v-for="index in 20" >{{index}}</div>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>
<style>
.item{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>

main.js  定义全局指令  方便其他地方复用

Vue.directive('anchor',{
inserted : function(el,binding){
el.onclick = function(){
  document.documentElement.scrollTop = $('#anchor-'+binding.value).offset().top
}
}
})

总结

以上所述是小编给大家介绍的vue中锚点的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 #Javascript
详解Angular如何正确的操作DOM
Jul 06 #Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 #Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 #Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 #Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
vue.js动画中的js钩子函数的实现
Jul 06 #Javascript
You might like
一段php加密解密的代码
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
php5中类的学习
2008/03/28 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
深入php list()函数的详解
2013/06/05 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
php构造函数与析构函数
2016/04/23 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
JS画线(实例代码)
2013/11/20 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
原生JS实现前端本地文件上传
2018/09/08 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
同事吵架检讨书
2014/02/05 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis