Vue鼠標滾輪滾動切換路由效果的實現(xiàn)方法
一個根路由組件(app下的根路由組件, 需要滾動切換的作為其子組件)
在根路由組件添加鼠標滾動時間監(jiān)聽, 在mounted中調用監(jiān)聽
當跳轉到其他路由(跳出這個根路由時), 根路由組件會被銷毀, 因此在根路由的destroed鉤子函數(shù)中清除掉事件監(jiān)聽
Vue路由切換過渡
vue的過渡
<transition :name="transitionName">
<div></div>
</transition>
使用transition 包裹需要過渡的組件, 或者是一個div, 或者是一個路由, 當這個創(chuàng)建或者銷毀的時候, 會加載指定的動畫效果, 這個動畫效果需要自己指定, 這里指定的是transitionName
然后在data里面聲明這個, 但是這個值賦值為' ', 因為需要根據(jù)路由向前或者向后對應不同的name
當路由向前(這里是向下), 指定為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)視路由變化時, 拿到路由信息, 對比這兩個的大小來判斷
到此這篇關于Vue鼠標滾輪滾動切換路由效果的實現(xiàn)方法的文章就介紹到這了,更多相關Vue切換路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue-cli--組件的導入與使用詳解，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
本篇文章主要介紹了詳解如何使用webpack在vue項目中寫jsx語法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue3的Composition API是一個全新的API，它允許開發(fā)人員將Vue組件中的邏輯封裝在單獨的功能性組合中，而不是依賴于Vue選項對象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue中使用echarts的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作
這篇文章主要介紹了Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享
今天小編就為大家?guī)硪黄獀ue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
我們有時候會碰到這種情況，需要連續(xù)發(fā)送兩個請求，第二個請求需要用第一個請求的某個返回值作為參數(shù)來作為第二個請求的請求參數(shù)，這篇文章主要介紹了vue請求如何按順序執(zhí)行,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了詳解vue文件中使用echarts.js的兩種方式，主要介紹了兩種使用方式，一種是以組件的形式另一種直接引入，非常具有實用價值，需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關于Vue簡易版無限加載組件實現(xiàn)原理與示例代碼的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue組件之間進行傳值的方法，文章圍繞主題展開詳細的內(nèi)容戒殺，具有一定的參考價值，需要的朋友可以參考一下2022-09-09