首頁 > web前端 > js教程 > Vue引入jquery實現平滑移動

Vue引入jquery實現平滑移動

php中世界最好的语言
發布: 2018-05-22 14:29:20
原創
1712 人瀏覽過

這次帶給大家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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板