Vue引入jquery实现平滑滚动到指定位置
更新时间：2018年05月09日 11:25:59 作者：紫裳
这篇文章主要介绍了Vue引入jquery实现平滑滚动到指定位置的效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
在以往的做法里首选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,修改如下图所示：
3.在vue模板的script中import这个jquery插件,然后就可以用了。我的项目里导航和其他模块是不同组件，然后利用发射接收的方法来利用index进行操作（发射接收的方法在我之前的博文有详细介绍，点击查看），平滑效果主要看我红框里的代码就可以，其他代码是我项目里的东西，不需要考虑:
总结
以上所述是小编给大家介绍的Vue引入jquery实现平滑滚动到指定位置，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
XSS 攻击是页面被注入了恶意的代码,下面这篇文章主要给大家介绍了一次VUE项目中遇到XSS攻击的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
这篇文章主要为大家介绍了十个Vue.js中有用的自定义钩子，让我们的代码更加好看。文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-04-04
组件是Vue核心功能之一,合理的组件化,可以减少我们代码的冗余,提高项目的可维护性,下面这篇文章主要给大家介绍了关于Vue中父子组件通信与事件触发的相关资料,需要的朋友可以参考下2022-03-03
今天小编就为大家分享一篇解决vue axios的封装 请求状态的错误提示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue+node实现音频录制播放,功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
为vue中的data赋值computed计算属性后,出现undefined原因及解决
这篇文章主要介绍了为vue中的data赋值computed计算属性后,出现undefined原因及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家详细介绍了Vue.js组件通信之自定义事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了浅谈Vant-list 上拉加载及下拉刷新的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue前端代码如何通过maven打成jar包运行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
下面小编就为大家分享一篇解决使用vue.js路由后失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论