由於最近開始要做mobile的webapp 項目,所以利用周末的時間思考了下頁面的體驗問題,我主要參考了"微信"的頁面體驗,總結主要有2個頁面切換效果(點擊進入頁面效果 和 返回上級頁面效果),以下內容的分析我默認已經有vue的開發基礎了。
最終效果如下圖:
第一步: 頁面的動態化 transition參數,是統一獲取的。
第二步: app來維護pageTransitions的頁面效果
第三步: router.map 路由配置如下,可以看到頁面做了(頭部、返回、菜單)的定制化:
第四步: 路由切換的事件攔截處理:
至此一個酷炫的頁面切換效果就完成了,呼吁開發人員應該多點個人情懷。