Vue鼠標(biāo)滾輪滾動切換路由效果的實現(xiàn)方法
一個根路由組件(app下的根路由組件, 需要滾動切換的作為其子組件)
在根路由組件添加鼠標(biāo)滾動時間監(jiān)聽, 在mounted中調(diào)用監(jiān)聽
當(dāng)跳轉(zhuǎn)到其他路由(跳出這個根路由時), 根路由組件會被銷毀, 因此在根路由的destroed鉤子函數(shù)中清除掉事件監(jiān)聽
Vue路由切換過渡
vue的過渡
<transition :name="transitionName">
<div></div>
</transition>
使用transition 包裹需要過渡的組件, 或者是一個div, 或者是一個路由, 當(dāng)這個創(chuàng)建或者銷毀的時候, 會加載指定的動畫效果, 這個動畫效果需要自己指定, 這里指定的是transitionName
然后在data里面聲明這個, 但是這個值賦值為' ', 因為需要根據(jù)路由向前或者向后對應(yīng)不同的name
當(dāng)路由向前(這里是向下), 指定為slide-down
然后定義slide-down的不同狀態(tài)下的激活效果為過渡效果
.slide-down-enter-active,
.slide-down-leave-active {
transition: all 500ms;
position: absolute;
}
隨后定義進入開始動畫
.slide-down-enter {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
定義離開激活動畫
.slide-down-leave-active {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
下面是一般是固定
即聲明-enter-active, -leave-active為過渡效果
隨后寫-enter, -leave-active具體需要的變化
一般就是一個-enter, 一個-leave-active
接著就是怎么判斷路由向前還是向后
首先是怎么向前向后切換路由
接著是怎么判斷是前還是后, 在寫路由的時候, 寫上meta, 通過在"根組件"里監(jiān)視路由變化時, 拿到路由信息, 對比這兩個的大小來判斷
到此這篇關(guān)于Vue鼠標(biāo)滾輪滾動切換路由效果的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue切換路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式
這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
基于Vue實現(xiàn)可選擇不連續(xù)的時間范圍的日期選擇器
這篇文章主要為大家詳細介紹了如何基于Vue.js實現(xiàn)一個可選擇不連續(xù)的時間范圍的日期選擇器，文中的示例代碼簡潔易懂，需要的可以參考一下2023-06-06
組件(Component)是 Vue.js 最強大的功能之一,組件可以擴展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于Vue封裝全局toast組件,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue項目前端埋點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了如何在vue單頁中重復(fù)引入同一子組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue 路由懶加載，當(dāng)打包構(gòu)建應(yīng)用時，JavaScript 包會變得非常大，影響頁面加載，這便是vue 路由懶加載，接下來隨小編一起進入文章了解更多詳細內(nèi)容吧2021-10-10
這篇文章主要介紹了vuex中的state屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue學(xué)習(xí)之組件用法,結(jié)合實例形式分析了vue.js組件的使用流程、模板、父子組件、插槽slot等相關(guān)原理與操作技巧,需要的朋友可以參考下2020-01-01
Element-Plus實現(xiàn)動態(tài)渲染圖標(biāo)的示例代碼
在Element-Plus中，我們可以使用component標(biāo)簽來動態(tài)渲染組件，本文主要介紹了Element-Plus?實現(xiàn)動態(tài)渲染圖標(biāo)教程，具有一定的參考價值，感興趣的可以了解一下2024-03-03
詳解利用 Vue.js 實現(xiàn)前后端分離的RBAC角色權(quán)限管理
本篇文章主要介紹了利用 Vue.js 實現(xiàn)前后端分離的RBAC角色權(quán)限管理，非常具有實用價值，需要的朋友可以參考下2017-09-09