環境
在sencha-touch-2.0.1.1系統中,在任何設備上;
現象及分析
頁面切換(push方法)到另一個頁面,此時頁面切換(pop方法)到原來頁面,再次頁面切換(push方法)到之前頁面,此時頁面沒有展示任何內容。
分析:1.在模擬器中,跟蹤代碼執行,並沒有發生異常或錯誤,並不是程序邏輯問題;
2.進一步分析,可能是sencha-touch框架存在問題。
解決方法
頁面中有field組件中name="id",所導致Ext.navigationview.View的push不起作用,把name的不命名爲”id”,問題解決。
2.問題:填寫表單時,按下軟鍵盤中“前往”鍵,跳轉到空白頁面
環境
設備:android,手機品牌:三星i9070 2.3.6系統,ST2版本:2.0.1.1
現象及分析
填寫表單時,彈起軟鍵盤,並輸入數據完畢後,按下“前往”鍵,則跳轉到空白頁面,並不可以進行任何操作,鎖死此頁面中。
分析:1.寫了一個簡單表單頁面代碼,按下“前往”鍵,結果沒有跳轉到空白頁面,且鍵盤收回,其他操作正常;
2.根據第一條分析,可能卡單銷售填寫保單程序中,可能有些代碼導致或觸發“前往”鍵跳轉到任何頁面;
3.監聽“前往”鍵,阻止此鍵觸發系統默認跳轉,測試結果是沒有效果,依然跳轉到空白頁面,可能不是此原因觸發而導致;
解決方法
解決辦法原則是排除法,把表單頁面中所有方法去掉,測試按“前往”鍵,結果沒有跳轉到空白頁面,進一步添加了initialize方法(表單初始化方法,繼承Ext.form.Panel的實體),發現出現跳轉空白頁面,判定問題就出現在這個initialize方法中,這個方法主要現實是監聽本頁面滾動條事件,當滾動條移動時,隱藏錯誤提示框。根據以上分析,在android2系統中,sencha-touch中自定義類繼承Ext.form.Panel並沒有完全調用父類所有方法,所以initialize方法中添加this.callParent();語句,來解決此問題。
3.問題:頁面切換時,頁面標題欄出現白邊狀閃爍
環境
設備:IOS,手機品牌:iphone/ipod,ST2版本:2.0.1.1
現象及分析
頁面切換時,頁面的標題欄上出現白邊狀閃爍。
分析:1.主流程頁面中嵌套了子系統編輯保單頁面,主體和子系統頁面切換,主要用了Ext.navigation.View的push/pop方法,可能同時嵌套navigation組件導致了這種現象。
解決方法
根據以上分析,測試了主體、子系統繼承Ext.Container,結果沒有出現閃爍;第二測試時主體系統繼承Ext.Container,子系統繼承Ext.navigation.View進行頁面切換,結果出現閃爍;第三測試主體繼承Ext.navigation.View,子系統繼承Ext.Container進行頁面切換,結果沒有出現閃爍。
綜合以上,可得出card佈局中嵌套Ext.navigation.View在IOS上會出現白邊狀閃爍,解決辦法是子系統繼承改爲Ext.Container。
4.問題:若鍵盤彈起狀態,點擊跳轉頁面A時,頁面A呈現空白
環境
設備:IOS,手機品牌:iphone/ipod,ST2版本:2.0.1.1
現象及分析
表單輸入框填寫數據,鍵盤彈起時,同時點擊跳轉頁面按鈕(此時,鍵盤有收回動作),則跳轉到的新頁面呈現空白狀態。相反,在鍵盤彈起,並且點擊跳轉頁面按鈕之前時,把鍵盤收回後跳轉頁面,則頁面沒有呈現空白狀況。
分析:反覆測試以上情況,100%出現空白的頁面。
解決方法
根據以上分析,可得原因是鍵盤沒有收回,導致頁面出現空白情況。處理方法是當點擊跳轉頁面時候,將此輸入框失去焦點,則觸發鍵盤收回,然後跳轉頁面。
5.問題:頁面拖動不了
環境
設備:android,手機品牌:華爲C8812E4.0系統,ST2版本:2.0.1.1
現象及分析
上下拖動頁面時,頁面緩慢和卡頓現象。
分析:1.此設備不是很好支持CSS3樣式,如transform變換等;
2.卡單銷售中,主要在滾動條、頁面切換運用了大量transform樣式,還有程序上循環語句,都有可能導致頁面卡頓現象。
解決方法
在sencha-touch.css文件中,1.註釋掉大部分transform樣式;2.把頁面切面效果改爲漸變(此效果沒有運用transform樣式);3.針對程序上循環語句中,把for in 語句替換成sencha-touch內置Ext.Object.each()語句,常用的對象某個屬性,賦予一個變量中,在循環語句中,即可快速地調用此變量,以減少遍歷對象的屬性。
6.問題:<label>標籤使用
環境
設備:android/IOS,ST2版本:2.0.1.1
現象及分析
<input type="checkbox" id="pr_input_checkRules_id" />
<label for="pr_input_checkRules_id" </label>
以上代碼中,在android設備正常顯示和操作,但是在IOS設備上無法顯示和操作。
解決方法
將兩個標籤順序替換執行,IOS正常顯示與操作。
7.問題:頁面切換速度與穩定性
環境
設備:android/IOS,ST2版本:2.0.1.1
現象及分析
在頁面切換方法中,sencha-touch框架有2大類切換方法。
1是使用Ext.navigation.View類中的push()、pop()方法進行頁面切換,此優勢是頁面切換效果配置(動畫、切換時間)可以省略,而且不用關心返回具體頁面。
2是使用card佈局中的setActiveItem()方法,同時還可以使用animateActiveItem()方法靈活控制切換動畫效果和時間等配置,但是每次頁面切換,都要知道具體跳轉頁面。
分析:使用了push()、pop()方法,可是頁面切換頻繁和加載大量數據,導致頁面切換速度更加緩慢,而且出現頁面短暫空白或要用手划動纔出現頁面。
解決方法
相比較2中,如果要求頁面切換速度快和穩定展示頁面,則使用animateActiveItem()方法,可以有效控制跳轉時間和提高穩定性。