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

最終效果如下圖：

?

?

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

?

第二步: app來維護(hù)pageTransitions的頁面效果

?

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

?

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

?

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

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

總結(jié)

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

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