小程序textarea顶层显示的bug

小程序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
        })
    },

其他

魔道祖师更新啦~~~~
哈哈哈哈~
汪叽无羡~~

    原文作者:miomiomio
    原文地址: https://segmentfault.com/a/1190000015597000
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞