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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
js分页工具实例
Jan 28 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
jquery实现手风琴效果
Nov 20 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
行政办公室岗位职责
2014/03/18 职场文书
中学清明节活动总结
2014/07/04 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
升学宴学生致辞
2015/09/29 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书