vue2.0模拟锚点
在vue项目中,因为采用路由跳转,会导致无法使用常规的a标签配合ID的锚点功能。
解决办法:
<a href="javascript:void(0)" @click="goAnchor('#anchor')"> 灰啊灰啊我的骄傲放纵</a>
methods: {
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.body.scrollTop = anchor.offsetTop
}
}
17. 9. 20 更新: 以上在FireFox有BUG,修复如下:
methods: {
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.body.scrollTop = anchor.offsetTop; // chrome
document.documentElement.scrollTop = anchor.offsetTop; // firefox
}
}
18. 5. 17 更新: 针对有好几个小伙伴提出的按此方法没有效果,统一回复如下
1. 此方法中改变body的滚动距离只是一个示例,非通用,实际开发中,你要清楚到底是改变哪个元素才能达到你的效果。
弄清楚这个,然后再去赋值。这是属于比较基础的知识。
2. 还有就是,博客评论我看到都会回复,微信提问处理更快。But, 我只会提思路,不会直接给出代码,思想懒惰者勿扰!
vue2.0模拟锚点的更多相关文章
- vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
- 使用vue2.0 vue-router vuex 模拟ios7操作
其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...
- vue2.0 transition -- demo实践填坑
前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...
- vue2.0+elementUI构建单页面后台管理平台
git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
- 重开Vue2.0
目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...
- Vue2.0+组件库总结
转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...
- 转:Vue2.0+组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- vue2.0+element-ui(01简单点的单页面)
前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...
随机推荐
- 并发编程—— FutureTask 源码分析
1. 前言 当我们在 Java 中使用异步编程的时候,大部分时候,我们都会使用 Future,并且使用线程池的 submit 方法提交一个 Callable 对象.然后调用 Future 的 get ...
- [转]Microsoft SQL SERVER 2008 R2 REPORT SERVICE 匿名登录
本文转自:https://www.cnblogs.com/Zouzhe/p/5736070.html SQL SERVER 2008 R2 是微软目前最新的数据库版本,在之前的SQL SERVER 2 ...
- 南方IT教材反馈
为了进一步提升教材质量,大家可以在底部留言区反馈您发现的任何问题或建议,谢谢! 最终我们将从所有读者中找出幸运读者发放奖品! 好教材也有我的一份功劳!
- 常用的7个SQl优化技巧
作为程序员经常和数据库打交道的时候还是非常频繁的,掌握住一些Sql的优化技巧还是非常有必要的.下面列出一些常用的SQl优化技巧,感兴趣的朋友可以了解一下. 1.注意通配符中Like的使用 以下写法会造 ...
- js实现iview表格 排名列
(有误,请勿观看) 一.排名的简单实现 //排名例子1 //需要排名的数组 //var myArray = [5,7, 7, 9, 8, 6, 23]; //新数组 //var thisArray = ...
- java 传入list集合 返回树形菜单,for循环遍历
public List<SysPermissionVO> getTreeMenu(List<SysPermissionVO> list,SysPermissionVO sysP ...
- 华中农业大学第五届程序设计大赛网络同步赛-A
Problem A: Little Red Riding Hood Time Limit: 1 Sec Memory Limit: 1280 MBSubmit: 860 Solved: 133[S ...
- js 微信支付
引入 <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0. ...
- 排序算法(7)--exchang Sorting--交换排序[2]--Quick Sort--快速排序
1.基本思想 从待排序列中选取一元素作为轴值(也叫主元). 将序列中的剩余元素以该轴值为基准,分为左右两部分.左部分元素不大于轴值,右部分元素不小于轴值.轴值最终位于两部分的分割处. 对左右两部分重复 ...
- Map对象以及for of的使用方法