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权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...
随机推荐
- ASP.NET编辑与更新数据(非GridView控件实现)
Insus.NET在实现<ASP.NET开发,从二层至三层,至面向对象 (5)>http://www.cnblogs.com/insus/p/3880606.html 中,没有把数据编辑与 ...
- Eclipse中使用printf报错 提示参数类型不对
报错信息: The method printf(String, Object[]) in the type PrintStream is not applicable for the argument ...
- 转载 HashSet用法
NET 3.5在System.Collections.Generic命名空间中包含一个新的集合类:HashSet<T>.这个集合类包含不重复项的无序列表.这种集合称为“集(set)”.集是 ...
- Java并发编程-移相器
移相器(Phaser)内有2个重要状态,分别是phase和party.phase就是阶段,初值为0,当所有的线程执行完本轮任务,同时开始下一轮任务时,意味着当前阶段已结束,进入到下一阶段,phase的 ...
- Moon Game (凸四边形个数,数学题)
Problem 2148 Moon Game Accept: 24 Submit: 61 Time Limit: 1000 mSec Memory Limit : 32768 KB Pro ...
- 转载 - java中接口的向上转型。和多态性
发现一篇对接口总结很精简的文章 1.在java中接口就是一个完全抽象的类,跟抽象类一样不能产生对象,但是可以作为对象的引用,可以由其实现类向上转型,它就跟超类一样, 向上转型了,可以很好的利用接口,可 ...
- github 账号创建
1.注册 注册地址: https://github.com/join?source=header-home 2.建立组织 (1)点击头像旁边的"+",选择New organiz ...
- Oracle中Database Link的创建和Synonyms
在工作中我遇到过这样的一个问题,就是当我需要将远程主机上Oracle数据中某个表的数据copy到本地Oracle时,有多种方法可以实现.1.将所需要的数据导出到csv或其他格式的文档,复制到本地进行直 ...
- MariaDB MySQL变量取值避免四舍五入的方法
MySQL变量取值避免四舍五入的方法 By:授客 QQ:1033553122 在一些对数据精确度要求比较高的场景(比如资金结算)下,变量取值时不能对变量值进行四舍五入操作,这时候就要做些预处理工作. ...
- Linux 释放Linux 系统预留的硬盘空间
释放 Linux 系统预留的硬盘空间 by:授客 QQ:1033553122 大多数文件系统都会保留一部分空间作为紧急情况时用(比如硬盘空间满了),这样能保证有些关键应用(比如数据库)在硬盘满的时 ...