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表单设置值的方法
Jun 30 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现带进度条的轮播图
Sep 13 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 zip文件解压类代码
2009/12/02 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP7 标准库修改
2021/03/09 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python del()函数用法
2013/03/24 Python
Python映射拆分操作符用法实例
2015/05/19 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python 删除非空文件夹的实例
2018/04/26 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
运动会广播稿100字
2014/01/11 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
共产党员承诺书
2014/03/25 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
python办公自动化之excel的操作
2021/05/23 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers