虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > JavaScript > Vue引入jquery实现平滑滚动到指定位置

Vue引入jquery实现平滑滚动到指定位置
类别:JavaScript   作者:码皇   来源:互联网   点击:

这篇文章主要介绍了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实现平滑滚动到指定位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • Vue中正确使用jQuery的方法
  • jquery在vue脚手架中的使用方式示例
  • vue单页应用中如何使用jquery的方法示例
  • 详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
  • vue中如何引入jQuery和Bootstrap
  • jQuery实现将div中滚动条滚动到指定位置的方法
  • jQuery实现在textarea指定位置插入字符或表情的方法
  • js,jquery滚动/跳转页面到指定位置的实现思路
  • 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
  • JQuery简单实现锚点链接的平滑滚动
  • jQuery实现平滑滚动到指定锚点的方法
  • 使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
  • jQuery 锚点跳转滚动条平滑滚动一句话代码
相关热词搜索: jquery 平滑滚动到指定位置 jquery滚动到指