由于最近開始要做mobile的webapp 項目，所以利用周末的時間思考了下頁面的體驗問題，我主要參考了"微信"的頁面體驗，總結(jié)主要有2個頁面切換效果（點擊進入頁面效果 和 返回上級頁面效果），以下內(nèi)容的分析我默認已經(jīng)有vue的開發(fā)基礎了。

最終效果如下圖：

?

?

第一步: 頁面的動態(tài)化 transition參數(shù)，是統(tǒng)一獲取的。

?

第二步: app來維護pageTransitions的頁面效果

?

第三步: router.map 路由配置如下，可以看到頁面做了（頭部、返回、菜單）的定制化：

?

第四步: 路由切換的事件攔截處理：

?

至此一個酷炫的頁面切換效果就完成了，呼吁開發(fā)人員應該多點個人情懷。

轉(zhuǎn)載于:https://www.cnblogs.com/Kummy/p/5723677.html

總結(jié)

以上是生活随笔為你收集整理的原创《如何用vue来轻松的驾驭 html5 webapp的页面体验》的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。