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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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和ACCESS写聊天室(十)
2006/10/09 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
表单内同名元素的控制
2006/11/22 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python实现的计算器功能示例
2018/04/26 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
2015年幼儿园教研活动总结
2015/03/25 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
使用Apache Camel表达REST服务的方法
2022/06/10 Servers