移動前端單頁面製作的一些思考

2021-09-08 22:06:59 字數 761 閱讀 2352

一.路由

場景是,webview單頁面,url不會變化。

兩個標識,頁面自己的路由標識,當前路由狀態。

進入到某頁面,當前路由狀態更新為某頁面標識。

有一張路由表,監聽回退事件。

一旦回退,依據路由表和當前路由狀態,找到頁面,觸發該頁面的回退事件。

路由標識名字建議,grandfather-father-son這種命名方式。

二.過場動畫

因為,通過translate的頁面覆蓋,是以dom結構順序為標準(而不是以z-index),後面的dom覆蓋前面的dom。

所以,你從頁面a切換到頁面b的時候,得把b的dom移到a的後面。 

dom位置變化後,緊接著加上位移動畫的class,是不會產生動畫。請用settimeout延遲。

總結順序,更新當前路由狀態->移除之前過場動畫->調整dom位置->延遲執行過場動畫。

三.一些小技巧(20141024)

1.點透或觸控延遲300ms,如果你的業務只有點點點,用fastclick;有左滑右滑之類,用成熟的觸控庫來tap。

用fastclick,將難以保持觸控元素時的css樣式的變化,比如:active,:hover。

2.禁止螢幕滾動,除了那個,還有設定body高度為一屏高。

3.html模板,可以ajax txt方式請求html**,自己寫model,view model,control來實現類mvvm的易維護**。

移動前端知識的一些總結

這裡開始內容 這裡開始內容 發簡訊,winphone系統無效 html 發簡訊給 10086 寫郵件,可參考 移動web頁面給使用者傳送郵件的方法 html peun foxmail.com 按鈕按鈕 模組一模組二 模組三?使用注意 flex下的子元素必須為塊級元素,非塊級元素在android2.3...

關於空頁面設計的一些思考

空頁面是為了解決乙個什麼樣的問題,想達到什麼樣的效果,有哪些優化的空間?空頁面在app設計中的地位處於比較靠後的乙個地位,是將app的主流程頁面設計完整之後,再來進行一些頁面補充的時候,才會開始思考的事情。可就是這樣的乙個頁面,作為互動設計師也是有發揮空間的。思路如下圖 在思考的時候,思路是,空頁面...

常用前端頁面一些知識總結

1 margin 和padding 3 js如何獲取兩個特定符號之間的值 比如var chars abc foxmail.com 怎麼獲取chars中 與 這兩個符號中間的值,也就是foxmail var str chars.substring chars.indexof chars.indexof...