收藏
回答

组件内的textarea复用时会导致textarea锁死,无法操作

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug textarea 客户端 6.6.6.1300 2.0.8



封装了一个评论弹框组件


样子长这样子


代码是酱紫的↓

wxml:

<view class='cover' hidden='{{hide}}' bindtap='tapHandle' data-opr='close'>
   <view class='content' style='top:{{top}}rpx' >
     <view class='title'>评论<view class='close' data-opr='close'>view>view>
     <label class='area'>
       <textarea class='eva-content'
         placeholder-class='placeholder'
         value='{{value}}'
         auto-focus='{{!hide}}'
         focus='{{!hide}}'
         placeholder='{{evaWho ? ("回复"+evaWho) : "评论"}}:'
         bindinput='inputText'
         bindfocus='focus'
         maxlength='100'
         bindblur='blur'
         cursor-spacing='180'
         adjust-position='{{false}}'
       >textarea>
     label>
     <button class='send {{text.length>0?"":"disable"}}' data-opr='send'>发送button>
   view>
view>

wxss:

/* components/input-eva/input-eva.wxss */
.cover {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 top: 0;
 background: rgba(0, 0, 0, .4);
 font-size: 26rpx;
 z-index: 3;
}
.content {
 position: absolute;
 top: 373rpx;
 left: 30rpx;
 right: 30rpx;
 padding: 0 30rpx 30rpx;
 background: white;
}
.title {
 line-height: 114rpx;
 height: 114rpx;
 text-indent: 30rpx;
 font-size: 32rpx;
 font-weight: bold;
 color: #999;
 text-align: center;
}
.close {
 float: right;
 width: 60rpx;
 height: 100%;
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAHlBMVEUAAACampr///+ZmZmampqampqampqbm5uampqZmZnRBniaAAAACXRSTlMAnAHx5Y2HfnH+McWJAAAAeElEQVQY012RywmAMBBEFzvQmzf1YA924NmbdVhJQIR0axjCLLxAsrt5Q7KfeK7ItZ9xlMXhML9x18nxWr+2y2LcmA4toX4a2xjI+t6OcfeMuyCxBJtwCkbhFFThFBgjpp7v8T/mw3xZD+tlP9gv9pP95jw4L87zB8x6PJd9LT2AAAAAAElFTkSuQmCC) center/30rpx no-repeat;
}
.area {
 display: block;
 padding: 10rpx 16rpx;
 height: 200rpx;
 border: 2rpx solid #E6E6E6;
 border-radius: 6rpx;
 background: white;
}
.eva-content {
 width: 100%;
 height: 100%;
 
}
.send {
 margin: 20rpx 0 0;
 line-height: 80rpx;
 border-radius: 6rpx;
 color: white;
 background: #F3CC3E;
 font-weight: bold;
}
.send.disable {
 color: rgba(255, 255, 255, .66);
}
.placeholder {
 color: #ccc;
}

js:

// components/input-eva/input-eva.js
Component({
 properties: {
   hide: {
     type: Boolean,
     value: true
   },
   evaWho: {
     type: String,
     value: '',
     observer(newV,oldV) {
       if(newV !== oldV) {
         this.resetValue()
       }
     }
   }
 },
 data: {
   text: "",
   value: "",
   top: 373,
 },
 methods: {
   inputText(e) {
     this.setData({
       text: e.detail.value
     })
   },
   blur() {
     this.setData({top:373});
   },
   focus() {
     this.setData({top:20})
   },
   tapHandle({target:{dataset:{opr}}}) {
     if (opr == 'close') this.triggerEvent("close");
     else if(opr == 'send') this.send();
   },
   
   send() {
     this.triggerEvent("submit",this.data.text);
     this.resetValue();      
   },
   resetValue() {
     this.setData({ value: "", text: "" })
   }
 }
})

问题是这样的=>

在真机中,ios、安卓都一样,当前页面有这个组件时,当进入其他页面再返回到这个页面时,这个组件的textarea会崩溃,操作不了,连placeholder都显示不了【开发工具上是没问题的】。只有使用wx:if将组件回收,在返回到页面时再将其渲染才行。不知道什么原因。啥报错都没有。这个方案也是摸索了好久才搞出来的。






最后一次编辑于  2018-05-22  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 娇华
    娇华
    2018-05-22

    麻烦提供一下出现问题的机型和微信版本,并且给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-05-22
    赞同
    回复