在以往的做法里首選jquery的animate實現,但是Vue里并沒有這個方法。如何在Vue項目中實現點擊導航平滑滾動到指定位置,為了這效果我是快要崩潰了,上網查閱了很久發(fā)現并沒有真正意義上解決這個問題的,之前參考了一位博主的想法:通過在一定時間內定時分步長滾動,連續(xù)起來后肉眼觀察就是平滑滾動的效果(點擊查看),當時看到這篇文章我是心花怒放,趕緊參考代碼寫進去,然并卵。。。根本沒有效果,后來聯系博主討論后得出結論可能是我的vue2.4版本對計時器不友好,建議我降版本,這樣的話。。。我還是繼續(xù)研究如何實現吧,最后實在查不到想不出什么好的方法,引入了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插件,然后就可以用了。我的項目里導航和其他模塊是不同組件,然后利用發(fā)射接收的方法來利用index進行操作(發(fā)射接收的方法在我之前的博文有詳細介紹,點擊查看),平滑效果主要看我紅框里的代碼就可以,其他代碼是我項目里的東西,不需要考慮:

總結
以上所述是小編給大家介紹的Vue引入jquery實現平滑滾動到指定位置,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答