本文實例為大家分享了vue實現頁面切換滑動的具體代碼，供大家參考，具體內容如下
試著用Vue做了個頁面切換時滑動的效果，如下示例，源碼
這裡使用了Vue的transition組件，具體可見文檔
直接看實現過程
先在本機安裝vue-cli
npm install -g @vue/cli
初始化一個項目
vue create hello-world
創建完畢後安裝vue-router和vuex，現在vue-cli3支持圖形化界面，可以直接在項目目錄用ui啟動，在管理頁面點擊安裝
vue ui
然後建立這樣一個項目結構
store.js
首先在vuex的倉庫裡存儲頁面切換的狀態
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { states: 'turn-left' }, mutations: { setTransition(state, states) { state.states = states } }, actions: { } })
建立四個切換用的頁面
A,B,C,D換個顏色就行，記得在router.js裡配置下路由，有問題可以去我的倉庫看源碼。
頂部標題和底部顏色都通過props傳給子組件
top.vue
back{{title}}
bottom.vue
bottom
過程中遇到的問題
原本底部是使用fixed定位的，但fixed在transition的動畫中會出現一些奇怪的抖動，原因不明，有大佬知道的話希望能留言告知下。
這裡使用absolute替代了fixed，進頁面時獲取頁面高度，然後計算出top值。
[sl_ivan ] vue實現頁面切換滑動效果已經有323次圍觀