封装了一个评论弹框组件
样子长这样子
代码是酱紫的↓
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'> |
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.jsComponent({ 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将组件回收，在返回到页面时再将其渲染才行。不知道什么原因。啥报错都没有。这个方案也是摸索了好久才搞出来的。
麻烦提供一下出现问题的机型和微信版本，并且给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题