Vue引入jquery實現平滑移動

這次帶給大家Vue引入jquery實現平滑移動，Vue引入jquery實現平滑移動的注意事項有哪些，下面就是實戰案例，一起來看一下。

在以往的做法裡首選jquery的animate實現，但是Vue裡並沒有這個方法。如何在Vue專案中實現點擊導航平滑滾動到指定位置，為了這效果我是快要崩潰了，上網查閱了很久發現並沒有真正意義上解決這個問題的，之前參考了一位博主的想法：透過在一定時間內定時分步長滾動，連續起來後肉眼觀察就是平滑滾動的效果（點擊查看），當時看到這篇文章我是心花怒放，趕緊參考代碼寫進去，然並卵。 。 。根本沒有效果，後來聯繫博主討論後得出結論可能是我的vue2.4版本對計時器不友好，建議我降版本，這樣的話。 。 。我還是繼續研究如何實現吧，最後實在查不到想不出什麼好的方法，引入了jquery然後用animate方法幾個代碼就實現了這效果。

1.npm安裝jquery：npm installjquery--registry=<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>registry.npm.taobao.org --verbose

2.安裝成功後修改webpack設定檔：build--webpack.base.conf.js,修改如下圖：

3.在vue模板的script中import這個jquery插件,然後就可以用了。我的專案裡導航和其他模組是不同組件，然後利用發射接收的方法來利用index進行操作（發射接收的方法在我之前的博文有詳細介紹，點擊查看），平滑效果主要看我紅框裡的程式碼就可以，其他程式碼是我專案裡的東西，不需要考慮:

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS Promise案例程式碼解析

#node Async/Await 非同步程式實作詳解

以上是Vue引入jquery實現平滑移動的詳細內容。更多資訊請關注PHP中文網其他相關文章！