在以往的做法里首选 jquery 的 animate 实现, 但是 vue 里并没有这个方法. 如何在 Vue 项目中实现点击导航平滑滚动到指定位置, 为了这效果我是快要崩溃了, 上网查阅了很久发现并没有真正意义上解决这个问题的, 之前参考了一位博主的想法: 通过在一定时间内定时分步长滚动, 连续起来后肉眼观察就是平滑滚动的效果 (点击查看 http://www.cnblogs.com/wisewrong/p/6495726.html), 当时看到这篇文章我是心花怒放, 赶紧参考代码写进去, 然并卵... 根本没有效果, 后来联系博主讨论后得出结论可能是我的 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 实现平滑滚动到指定位置, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/139784.htm