小程序textarea显示混乱

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_38426472/article/details/80997016

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

其他

喵喵喵~~~~

猜你喜欢

转载自blog.csdn.net/sinat_38426472/article/details/80997016