vue實(shí)現(xiàn)界面滑動(dòng)效果
更新時(shí)間：2021年07月16日 15:16:13 作者：Stephanie翟
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)界面滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)界面滑動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下
項(xiàng)目需求+效果圖
1.項(xiàng)目需求
【點(diǎn)擊底部導(dǎo)航欄，切換頁(yè)面的時(shí)候，會(huì)有一個(gè)滑動(dòng)的效果】
2.效果圖
代碼+關(guān)鍵代碼解析
1.代碼
Botnav.vue導(dǎo)航欄界面
<template>
<div>
<transition :name="transitionName">
<router-view class="Router"></router-view>
</transition>
<template>
<script>
export default {
data () {
return {
// 從左往右滑動(dòng)
transitionName:'slide-right',
}
</script>
<style lang="stylus">
.Router
position absolute
width 100%
transition all 0.8s ease
.silde-left-enter,.slide-right-leave-active
opacity 0
-webkit-transform translate(100%,0)
transform translate(100%,0)
.silde-left-leave-active,.slide-right-enter
opacity 0
-webkit-transform translate(-100%,0)
transform translate(-100%,0)
</style>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue使用Split封裝通用拖拽滑動(dòng)分隔面板組件
- 使用Vue-scroller頁(yè)面input框不能觸發(fā)滑動(dòng)的問(wèn)題及解決方法
- vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面
- vue實(shí)現(xiàn)頁(yè)面切換滑動(dòng)效果
- 解決vue 界面在蘋(píng)果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓問(wèn)題
- vue 路由頁(yè)面之間實(shí)現(xiàn)用手指進(jìn)行滑動(dòng)的方法
- 基于Vue實(shí)現(xiàn)頁(yè)面切換左右滑動(dòng)效果
相關(guān)文章
vue3中通過(guò)遍歷傳入組件名稱動(dòng)態(tài)創(chuàng)建多個(gè)component 組件
這篇文章主要介紹了vue3中通過(guò)遍歷傳入組件名稱動(dòng)態(tài)創(chuàng)建多個(gè)component 組件,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vuex是一個(gè)專(zhuān)門(mén)為vue開(kāi)發(fā)的狀態(tài)管理工具,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),其核心是state,下面這篇文章主要給大家介紹了關(guān)于Vuex的安裝、搭建及案例的相關(guān)資料,需要的朋友可以參考下2022-05-05
Vue3新?tīng)顟B(tài)管理工具實(shí)例詳解
Vue3公布曾經(jīng)有一段時(shí)間了,它采納了新的響應(yīng)式零碎,而且構(gòu)建了一套全新的 Composition API,下面這篇文章主要給大家介紹了關(guān)于Vue3新?tīng)顟B(tài)管理工具的相關(guān)資料,需要的朋友可以參考下2022-03-03
本篇文章主要介紹了VUE元素的隱藏和顯示（v-show指令)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要為大家詳細(xì)介紹了Vue中常見(jiàn)的生命周期鉤子函數(shù)的使用,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
vue elementUI實(shí)現(xiàn)自定義正則規(guī)則驗(yàn)證
本文主要介紹了vue elementUI實(shí)現(xiàn)自定義正則規(guī)則驗(yàn)證，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue?頂部消息橫向滾動(dòng)通知效果實(shí)現(xiàn)
系統(tǒng)頂部展示一個(gè)橫向滾動(dòng)的消息通知,就是消息內(nèi)容從右往左一直滾動(dòng),這篇文章主要介紹了vue頂部消息橫向滾動(dòng)通知,需要的朋友可以參考下2024-02-02
vue項(xiàng)目配置使用flow類(lèi)型檢查的步驟
這篇文章主要介紹了vue項(xiàng)目配置使用flow類(lèi)型檢查的步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
用vue構(gòu)建多頁(yè)面應(yīng)用的示例代碼
這篇文章主要介紹了用vue構(gòu)建多頁(yè)面應(yīng)用的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09