Vue引入jquery實現(xiàn)平滑滾動到指定位置
在以往的做法里首選jquery的animate實現(xiàn)，但是Vue里并沒有這個方法。如何在Vue項目中實現(xiàn)點擊導(dǎo)航平滑滾動到指定位置，為了這效果我是快要崩潰了，上網(wǎng)查閱了很久發(fā)現(xiàn)并沒有真正意義上解決這個問題的，之前參考了一位博主的想法：通過在一定時間內(nèi)定時分步長滾動，連續(xù)起來后肉眼觀察就是平滑滾動的效果（點擊查看），當(dāng)時看到這篇文章我是心花怒放，趕緊參考代碼寫進(jìn)去，然并卵。。。根本沒有效果，后來聯(lián)系博主討論后得出結(jié)論可能是我的vue2.4版本對計時器不友好，建議我降版本，這樣的話。。。我還是繼續(xù)研究如何實現(xiàn)吧，最后實在查不到想不出什么好的方法，引入了jquery然后用animate方法幾條代碼就實現(xiàn)了這效果。
1.npm安裝jquery：npm installjquery--registry=https://registry.npm.taobao.org --verbose
2.安裝成功后修改webpack配置文件：build--webpack.base.conf.js,修改如下圖所示：
3.在vue模板的script中import這個jquery插件,然后就可以用了。我的項目里導(dǎo)航和其他模塊是不同組件，然后利用發(fā)射接收的方法來利用index進(jìn)行操作（發(fā)射接收的方法在我之前的博文有詳細(xì)介紹，點擊查看），平滑效果主要看我紅框里的代碼就可以，其他代碼是我項目里的東西，不需要考慮:
總結(jié)
以上所述是小編給大家介紹的Vue引入jquery實現(xiàn)平滑滾動到指定位置，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue中使用swiper失效問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了Vue2.0用戶權(quán)限控制解決方案的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
require.context是webpack提供的一個api,通常用于批量注冊組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實現(xiàn)嗎
這篇文章主要介紹了你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實現(xiàn)嗎，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
虛擬列表是一種技術(shù)，它只渲染用戶當(dāng)前可見的列表項，而不是渲染整個列表，這篇文章主要來和大家聊聊虛擬列表的原理與實現(xiàn)，希望對大家有所幫助2023-05-05
解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題
今天小編就為大家分享一篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了解決vue中監(jiān)聽返回鍵問題,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
vue組件定義，全局、局部組件，配合模板及動態(tài)組件功能示例
這篇文章主要介紹了vue組件定義，全局、局部組件，配合模板及動態(tài)組件功能,結(jié)合實例形式分析了vue.js中組件的定義、全局組件、局部組件、配合模板組件及動態(tài)組件的相關(guān)使用方法與操作注意事項,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue axios同步請求解決方案,需要的朋友可以參考下2017-09-09
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢，感興趣的朋友一起看看吧2017-10-10