同學們在試用angular+ionic開發移動端時,由於安卓和蘋果系統的不同,微信和其他瀏覽器的不同,會出現很多難以解決的bug,下面是我在項目中遇到的一些bug
1、<ion-content class="zkht-callUp-container" overflow-scroll="false"></ion-content>
overflow-scroll="false"遇到安卓上的微信頁面會使識別二維碼功能失效
解決辦法:overflow-scroll="true" 或者刪除此屬性
2、div設置了overflow-y:scroll;,但是安卓微信版卻顯示的overflow-y:hidden;的效果,蘋果的微信和瀏覽器以及安卓的自帶瀏覽器都是scroll顯示的,唯獨安卓微信不行
解決辦法:http://www.cnblogs.com/JoannaQ/archive/2013/06/24/3151843.html
3、<ion-content class="zkht-callUp-container" overflow-scroll="true"></ion-content>
如果在a頁面設置overflow-scroll="true" ,單獨設置此屬性會使蘋果手機剛進入a頁面可以實現滾動,但是a頁面跳轉到b頁面再返回到a頁面時滾動失效
如果a頁面還有橫向滾動,overflow-scroll="false"會導致在安卓系統中橫向滾動失效
4、<input type="number">在ios手機中還可以輸入非數字
解決辦法:<input type="number" onchange="this.value=this.value.replace(/[^0-9.]+/,'');">
如果在angular中遇到此問題,請注意:
<input type="number" onchange="this.value=this.value.replace(/[^0-9.]+/,'');" ng-model="formData.inputVal">
當頁面剛加載時,打印formData.inputVal為“”
當輸入數字,再刪除所有輸入內容時,打印formData.inputVal為null
在這里不能使用oninput="this.value=this.value.replace(/[^0-9.]+/,'');"
使用oninput會導致輸入非數字+數字時,拿到的輸入框值為空
補充: 猜想可能是oninput和onchange的出發機制不同造成的,oninput是在輸入是立即觸發,onchange是在失去焦點時觸發
5、select插件在微信環境下出現無法點擊顯示下拉框
解決方法: 在select的父元素中加入屬性 data-tap-disabled="true"