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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
原生js实现选项卡功能
Mar 08 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
Vue v-text指令简单使用方法示例
Sep 19 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
综合图片计数器
2006/10/09 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery动态添加option示例
2013/12/30 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
linux 后台运行node服务指令方法
2018/05/23 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
pycharm远程调试openstack的图文教程
2017/11/21 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
《学会合作》教学反思
2014/04/12 职场文书
节约用电标语
2014/06/17 职场文书
获奖感言怎么写
2015/07/31 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
浅谈Redis中的RDB快照
2021/06/29 Redis
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL