小程式textarea顯示混亂
阿新 • • 發佈:2018-11-28
小程式textarea的bug
官方bug
- 微信版本 6.3.30,textarea 在列表渲染時,新增加的 textarea 在自動聚焦時的位置計算錯誤。
- textarea 元件是由客戶端建立的原生元件,它的層級是最高的,不能通過 z-index 控制層級。
- 請勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 元件。
場景
- textarea在聚焦時會定位到上個位置,當用戶輸入時又重新返回設定的位置,頁面滾動時會固定在螢幕的位置上
- textarea沒有在scroll-view、swiper、picker-view、movable-view中使用,但是還是會存在這樣的問題
- 首先說明一下:頁面如果page設定為overflow:scroll,會出現上述問題
- textarea永遠在頁面的頂層,無法降低層級
解決辦法
- 調整頁面樣式,尤其是overflow屬性的使用
- 如果頁面存在彈出層這樣的需求,使用z-index是無法降低層級的,這是官方的bug,沒辦法解決。我採用的替代解決方法是:使用wx:if的方式控制textarea的顯示
- 彈層如果直接是當前頁面的元素,只用在關閉彈層時修改資料狀態就行
- 彈層如果是元件,也需要在關閉彈層時修改狀態,此時就需要元件父子間的通訊
子元件向父元件傳值
子元件觸發指定方法時,傳送事件
closeCoupon:function(){ //do something this.triggerEvent("change","miomiomiomio~~~") }
父元件監聽方法,在父元件呼叫的元素上監聽(.wxml)
<cxCoupon id='cxCoupon' bind:change="changeCoupon"></cxCoupon>
父元件監聽方法,在父元件中處理資料(.js)
changeCoupon:function(e){ this.setData({ isShowRemark:e.detail }) },
其他
喵喵喵~~~~