Input：
1、Focus, h5平臺根據各家瀏覽器決定是否自動聚焦；
2、支付寶無法自動聚焦且ios在支付寶平臺發起驗證碼，鍵盤沒有一鍵粘貼板；
3、百度在自動聚焦時blur 事件總是先于focus 事件，因此在多個input 存在的情況下，要靠程式自動喚起B input 聚焦，必然會先執行A 的失焦事件，然后再執行B的聚焦事件；
4、不同機型在允許自動聚焦功能的平臺上，聚焦和失焦的事件處理也會有差別，ios 普遍失焦事件先于聚焦事件，在頻繁地操作聚焦失焦時，ios容易出現鍵盤的起落問題；
5、ios 在多個input 框存在的情況下點擊鍵盤的一鍵粘貼，再重新的驗證碼分配到其他幾個input 的情況下，會先觸發所有值發生改變的input 的onInput 事件，Android 不會觸發其他input 的onInput 事件；
6、ios 在A input 框輸入多余的值再洗掉，然后再洗掉B input的值，重新聚焦A時, 聚焦的位置不是值的最后面的位置；
7、ios safari 瀏覽器在自動填充粘貼板的值時會產生黃色背景，會遮擋原本設定的樣式， 除非input 的值再次發生變化；
8、多個input或textarea要避免自動喚起聚焦的操作；
9、input慎用絕對定位，在支付寶喚起鍵盤時，會導致頂部出現空白，
scroll-view：
1、在用到scroll-view的情況下應避免整頁重繪，onPulldownRefresh 和onReachBottom, 因為onPulldownRefresh 事件本質上就是對touch事件和scroll的封裝，scroll的滾動事件以及自身的refresh 事件是會與uniapp 的onPulldownRefresh 和onReachBottom 發生沖突，
2、scroll-view 的 @scrolltoupper 只要滾動條滾動到頂部就會被觸發，要處理下拉重繪必須要使用 @refresherrefresh，并設定開啟下拉重繪refresher-enabled = true，設定下拉重繪狀態 refresher-triggered = false, refresher-triggered = true 時會觸發 @refresherrefresh 事件
3、在開啟自定義重繪后，下拉重繪會 觸發 @refresherrefresh 事件，@refresherrefresh 事件 也是對touch事件的封裝，因此在下拉后呼叫 @refresherrestore 事件和 @refresherabort 中止 @refresherrefresh 的觸發并使下拉得到復位，否則會導致@refresherrefresh 事件一直被觸發，
4、scroll-view 的下拉事件還存在平臺的兼容性，支付寶平臺不支持自定義下拉重繪，看到的下拉效果其實是onPullDown的觸發效果，
5、百度小程式在scroll-view 已經掛載的情況下，scroll-view 的內容的height 發生變化，scroll-view 沒有重新計算重新滾動高度，會導致scroll-view 的滾動部分失效，需要重新渲染 scroll-view 組件，和重新設定滾動條高度；
6、APP 使用scroll-view 自定義下拉重繪會出現下拉距離過長的問題；
Swiper
1、swiper 會自動生成一個固定高度，默認根據繼承或設定的字體大小生成相應的高度，
2、根據情況給swiper 設定一個層級最高的固定高度；
頂部重繪
1、支付寶在已經設定 enablePullDownRefresh = false 的情況下，還是會有頂部下拉重繪效果，應設定禁止下拉 allowsBounceVertical = ‘NO’；
自定義導航欄
1、微信、位元組、h5 支持自定義導航欄包括導航欄背景和字體顏色；
2、支付寶自定義有兼容問題：文字完全靠左與回傳鍵重疊切原生回傳鍵無法消除
3、百度兼容：原生回傳鍵無法消除與自定義回傳鍵重疊或錯開；
滾動
1、呼叫onPageScroll 和onReachBottom 的情況下，外層容器不要設定height = 100%； 或給具體的height, 應設定height = auto; 這兩個方法監聽page 的滾動條變化；
2、在外層容器設定-webkit-overflow-scrolling: touch; 已兼容移動端的觸摸滾動；
3、swiper 內部滾動會與頁面外層容器的滾動有兼容問題，盡量區域使用swiper 組件；
內部容器：
1、h5平臺100vh 包括二級頁面頭部標題欄和tabbar的高度，要獲得準確的頁面高度應設定
height = 100%;
或height= calc(100vh - 44px);
或直接呼叫uni.getSystemInfoSync().windowHeight,
這三種方式根據不同的使用場景使用；
2、針對iphoneX 底部上拉條的位置做兼容時建議設定安全距離，在設定底部安全距離的容器不要在該容器設定與安全距離相同的css樣式屬性，否則會根據css 優先級，只有層級最大的樣式屬性生效，
高度
慎用screenHeight
定位
1、慎用fixed , bottom = 0時，ios底部下拉的回彈效果會將底部fixed的元素覆寫，
解決辦法： 最外層容器設定overflow = hide;
富文本
1、將富文本中的<section> 標簽換成<div>標簽，百度、支付寶、位元組無法決議該標簽；
2、將富文本中的圖片style 設定為寬度width:100%;height:auto; ，否則圖片無法自適應螢屏寬度；
3、再用html-parser將富文本字串決議成nodes 模式；
https://github.com/dcloudio/hello-uniapp/blob/master/common/html-parser.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/300779.html
標籤：其他