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实现提示语淡入效果
May 05 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 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
8个PHP程序员常用的功能汇总
2014/12/18 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
use jscript List Installed Software
2007/06/11 Javascript
JS 常用校验函数
2009/03/26 Javascript
js 函数的副作用分析
2011/08/23 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
详解a++和++a的区别
2017/08/30 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python的词法分析与语法分析
2013/05/18 Python
python实现ftp客户端示例分享
2014/02/17 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python实现K最近邻算法
2018/01/29 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Python并行分布式框架Celery详解
2018/10/15 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
学前教育教师求职自荐信
2013/09/22 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
企业党员个人自我评价
2014/09/20 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
农村党员干部承诺书
2015/05/04 职场文书
酒桌上的开场白
2015/06/01 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers