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