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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现评论模块
Aug 19 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
3种平台下安装php4经验点滴
2006/10/09 PHP
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
express.js中间件说明详解
2019/03/19 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
手机被没收检讨书
2014/02/22 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
机关作风建设自查报告
2014/10/22 职场文书
单位计划生育责任书
2015/05/09 职场文书
辞职离别感言
2015/08/04 职场文书
法院执行局工作总结
2015/08/11 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫