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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
javascript常用的方法分享
Jul 01 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
vuex 的简单使用
Mar 22 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php判断是否为json格式的方法
2014/03/04 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php中使用websocket详解
2016/09/23 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
php判断目录存在的简单方法
2019/09/26 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
举例讲解Python中装饰器的用法
2015/04/27 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
Pycharm Git 设置方法
2020/09/15 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
行政文员岗位职责
2013/11/08 职场文书
通用员工手册范本
2015/05/14 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS