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权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...
随机推荐
- 在MVC应用程序中使用jQuery的验证
呵呵,觉得很久没有写博客了,均是工作忙于公司的ERP系统,这是正确的,因为这才是真正的工作. 今天想写点在MVC应用程序中,使用jQuery来验证.在进行之前,还是先回看一下<MVC会员注册&g ...
- php json_encode在CI框架中的使用细节
这个错误的造成原因是加载类类库,转换成json格式的时候不熟悉CI框架的规定导致的,CI框架中规定在将数据转换成json格式的时候需要将类库小写,当然了,调用的时候必须保证有这个类库,且可以在对应的文 ...
- 【JVM】1、java虚拟机参数-X 与 -XX的区别
Options that begin with -X are non-standard (not guaranteed to be supported on all VM implementation ...
- CSS参考手册
CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...
- Date类型错误
今天写代码的时候遇到一个很蛋疼的问题,明明实体类写的是Date型,文本框也是date型,数据库中对应的列是dateTime类型,这原本进行数据录入或者是修改这个操作是不应该出错的,但是一时没找到解决的 ...
- 墨卡托投影、地理坐标系、地面分辨率、地图比例尺、Bing Maps Tile System
GIS理论(墨卡托投影.地理坐标系.地面分辨率.地图比例尺.Bing Maps Tile System) 墨卡托投影(Mercator Projection),又名"等角正轴圆柱投影&quo ...
- OpenCV 图像特效
1.RGB ->灰度 #灰度 方式1 img=cv2.imread('b.png',0) img1=cv2.imread('b.png',1) height=img1.shape[0] widt ...
- webpack中配置Babel
Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...
- [iOS] Win8下在Vmware11中安装使用苹果系统OS X 10.10
近来因为人事变动,领导打算安排我做 iOS 的项目,所以需要花一些时间提前准备一下iOS相关的东西.因为自己手头上并没有 Mac(过年为了闲的时候能玩玩游戏买了联想,唉),想想不能只靠每天在公司的 ...
- oracle instr函数(oracle 用instr 来代替 like)
oracle instr函数 对于instr函数,我们经常这样使用:从一个字符串中查找指定子串的位置.例如: SQL> select instr('Oracle','or') position ...