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轻松实现无缝轮播效果
Mar 22 jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery treeview树形结构应用
Mar 24 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
Smarty3配置及入门语法
2017/02/22 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python实现微信远程控制电脑
2018/02/22 Python
Python多继承顺序实例分析
2018/05/26 Python
Python实现基于POS算法的区块链
2018/08/07 Python
详解python的super()的作用和原理
2020/10/29 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
2014年五一促销活动方案
2014/03/09 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
工作失职检讨书
2015/01/26 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
聘任合同书
2015/09/21 职场文书
小学中队委竞选稿
2015/11/20 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang