Vue怎么實(shí)現(xiàn)鼠標(biāo)滾輪滾動(dòng)切換路由效果

本篇內(nèi)容主要講解“Vue怎么實(shí)現(xiàn)鼠標(biāo)滾輪滾動(dòng)切換路由效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue怎么實(shí)現(xiàn)鼠標(biāo)滾輪滾動(dòng)切換路由效果”吧!

一個(gè)根路由組件(app下的根路由組件, 需要滾動(dòng)切換的作為其子組件)
在根路由組件添加鼠標(biāo)滾動(dòng)時(shí)間監(jiān)聽, 在mounted中調(diào)用監(jiān)聽
當(dāng)跳轉(zhuǎn)到其他路由(跳出這個(gè)根路由時(shí)), 根路由組件會(huì)被銷毀, 因此在根路由的destroed鉤子函數(shù)中清除掉事件監(jiān)聽

Vue路由切換過渡

vue的過渡

<transition :name="transitionName">
      <div></div>
 </transition>

使用transition 包裹需要過渡的組件, 或者是一個(gè)div, 或者是一個(gè)路由, 當(dāng)這個(gè)創(chuàng)建或者銷毀的時(shí)候, 會(huì)加載指定的動(dòng)畫效果, 這個(gè)動(dòng)畫效果需要自己指定, 這里指定的是transitionName

然后在data里面聲明這個(gè), 但是這個(gè)值賦值為' ', 因?yàn)樾枰鶕?jù)路由向前或者向后對(duì)應(yīng)不同的name

當(dāng)路由向前(這里是向下), 指定為slide-down

然后定義slide-down的不同狀態(tài)下的激活效果為過渡效果

.slide-down-enter-active,
.slide-down-leave-active {
transition: all 500ms;
position: absolute;
}

隨后定義進(jìn)入開始動(dòng)畫

.slide-down-enter {
opacity: 0;
transform: translate3d(0, 100%, 0);
}

定義離開激活動(dòng)畫

.slide-down-leave-active {
opacity: 0;
transform: translate3d(0, -100%, 0);
}

下面是一般是固定
即聲明-enter-active, -leave-active為過渡效果
隨后寫-enter, -leave-active具體需要的變化
一般就是一個(gè)-enter, 一個(gè)-leave-active

接著就是怎么判斷路由向前還是向后
首先是怎么向前向后切換路由

接著是怎么判斷是前還是后, 在寫路由的時(shí)候, 寫上meta, 通過在"根組件"里監(jiān)視路由變化時(shí), 拿到路由信息, 對(duì)比這兩個(gè)的大小來判斷

到此，相信大家對(duì)“Vue怎么實(shí)現(xiàn)鼠標(biāo)滾輪滾動(dòng)切換路由效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！