Vue引入jquery实现平滑滚动到指定位置


Posted in jQuery onMay 09, 2018

在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法。如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问题的,之前参考了一位博主的想法:通过在一定时间内定时分步长滚动,连续起来后肉眼观察就是平滑滚动的效果(点击查看),当时看到这篇文章我是心花怒放,赶紧参考代码写进去,然并卵。。。根本没有效果,后来联系博主讨论后得出结论可能是我的vue2.4版本对计时器不友好,建议我降版本,这样的话。。。我还是继续研究如何实现吧,最后实在查不到想不出什么好的方法,引入了jquery然后用animate方法几条代码就实现了这效果。

1.npm安装jquery:npm installjquery--registry=https://registry.npm.taobao.org --verbose

2.安装成功后修改webpack配置文件:build--webpack.base.conf.js,修改如下图所示:

Vue引入jquery实现平滑滚动到指定位置

3.在vue模板的script中import这个jquery插件,然后就可以用了。我的项目里导航和其他模块是不同组件,然后利用发射接收的方法来利用index进行操作(发射接收的方法在我之前的博文有详细介绍,点击查看),平滑效果主要看我红框里的代码就可以,其他代码是我项目里的东西,不需要考虑:

Vue引入jquery实现平滑滚动到指定位置

总结

以上所述是小编给大家介绍的Vue引入jquery实现平滑滚动到指定位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
JS文件中加载jquery.js的实例代码
May 05 #jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
基于jquery实现左右上下移动效果
May 02 #jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
You might like
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
js select option对象小结
2013/12/20 Javascript
javascript判断office版本示例
2014/04/11 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python实现随机漫步功能
2018/07/09 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python多线程下信号处理程序示例
2019/05/31 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
党风廉政承诺书
2014/03/27 职场文书
城管大队整治方案
2014/05/06 职场文书
励志演讲稿600字
2014/08/21 职场文书
员工评语范文
2014/12/31 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
Python各协议下socket黏包问题原理
2022/04/12 Python