小程序textarea显示混乱

小程序textarea的bug

官方bug

1. 微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误。
2. textarea 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
3. 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。

场景

1. textarea在聚焦时会定位到上个位置，当用户输入时又重新返回设置的位置，页面滚动时会固定在屏幕的位置上
2. textarea没有在scroll-view、swiper、picker-view、movable-view中使用，但是还是会存在这样的问题
3. 首先说明一下：页面如果page设置为overflow：scroll，会出现上述问题
4. textarea永远在页面的顶层，无法降低层级

解决办法

1. 调整页面样式，尤其是overflow属性的使用
2. 如果页面存在弹出层这样的需求，使用z-index是无法降低层级的，这是官方的bug，没办法解决。我采用的替代解决方法是:使用wx:if的方式控制textarea的显示
3. 弹层如果直接是当前页面的元素，只用在关闭弹层时修改数据状态就行
4. 弹层如果是组件，也需要在关闭弹层时修改状态，此时就需要组件父子间的通信

子组件向父组件传值

1. 子组件触发指定方法时，发送事件

   closeCoupon:function(){
       //do something
       this.triggerEvent("change","miomiomiomio~~~")
   }

2. 父组件监听方法，在父组件调用的元素上监听(.wxml)

   <cxCoupon id='cxCoupon' bind:change="changeCoupon"></cxCoupon>

3. 父组件监听方法，在父组件中处理数据(.js)

   changeCoupon:function(e){
       this.setData({
           isShowRemark:e.detail
       })
   },

其他

喵喵喵~~~~