Mjw：微信小程序之踩坑之旅二，textarea 組件的 bug（含10M動(dòng)圖） ... ... ...
|
測(cè)試時(shí)使用到：
在日常的開(kāi)發(fā)過(guò)程中，textarea 被使用到的頻率還是挺高的，且很多情況需要用 Javascript 去控制它的一些行為，本文將舉一個(gè)例子，去說(shuō)說(shuō)這個(gè)大家在開(kāi)發(fā)中都可能會(huì)遇到的坑。 需求：清空 textarea 組件的內(nèi)容。需求是多么的簡(jiǎn)單，實(shí)現(xiàn)起來(lái)想想都覺(jué)得好簡(jiǎn)單（偷笑.jpg），有童鞋馬上舉手回答，提出了一個(gè)解決方案。 方案1
缺點(diǎn)的確，方案1是完全可以做到清空 textarea 組件，但卻不夠靈活。
方案2有童鞋又回答，可以使用數(shù)據(jù)綁定功能，將 textarea 組件的 value 屬性綁定到一個(gè)數(shù)據(jù)屬性，這樣當(dāng)要清空 textarea 組件的內(nèi)容時(shí)，只需要對(duì)綁定的數(shù)據(jù)屬性做空字符串值賦值操作即可。 ，上面這位童鞋說(shuō)到點(diǎn)上了，和很多現(xiàn)在流行的 MVVM 框架一樣（諸如 vue、ng1、ng2等），小程序也具備了數(shù)據(jù)綁定的功能（感動(dòng).jpg），那么下面就使用這種方式去完成這個(gè)如此簡(jiǎn)單的需求吧。（吐槽：但對(duì)比那些框架，我覺(jué)得這個(gè)小程序的數(shù)據(jù)綁定功能用起來(lái)有點(diǎn)殘廢的感覺(jué)，可能被 vue 慣壞了） 對(duì)比圖方案已經(jīng)說(shuō)了，但既然說(shuō)是踩坑之旅，那么肯定就沒(méi)有方案所說(shuō)的那么簡(jiǎn)單，沒(méi)點(diǎn)坑就不像話了，下面會(huì)提供四張動(dòng)圖，都是根據(jù)方案2去處理的，請(qǐng)仔細(xì)對(duì)比。 在微信web開(kāi)發(fā)工具時(shí)，所有實(shí)現(xiàn)方式：你會(huì)看到：
上面說(shuō)到方式2和方式3都可以清空內(nèi)容，那么為什么會(huì)有方式3這種“搞笑”的寫(xiě)法呢？因?yàn)榉绞?這種寫(xiě)法在手機(jī)預(yù)覽時(shí)會(huì)有 bug，挺好笑的 bug，詳細(xì)可以看第三、第四張運(yùn)行圖。
在手機(jī)預(yù)覽時(shí)，方式1：跟在開(kāi)發(fā)工具運(yùn)行時(shí)的情況一樣，也是清空不了。
在手機(jī)預(yù)覽時(shí)，方式2：這就是的bug，清空是沒(méi)問(wèn)題的，但童鞋們可以留意一下 textarea 組件的 placeholder 的變化，清空之后，一時(shí)有一時(shí)沒(méi)有，為了解決這個(gè) bug，于是就有了方式3的寫(xiě)法。
在手機(jī)預(yù)覽時(shí)，方式3：加了個(gè) setTimeout，在300毫秒后再將綁定的屬性設(shè)置為空字符串。
看到這里，相信童鞋們都知道是怎么回事了，又是時(shí)候吐槽一下微信開(kāi)發(fā)團(tuán)隊(duì)了，你丫快點(diǎn)修復(fù)這種莫名其妙的 bug！ 代碼有人說(shuō)不上代碼不厚道，其實(shí)更想大家去我的倉(cāng)庫(kù)看，因?yàn)轫樖志涂梢?star 一下，哈哈哈。 處理頁(yè)面的js，test.js
Page({
data: {
inputContent: ''
},
clearInputContent(e) {
const mode = parseInt(e.target.dataset.mode)
switch (mode) {
case 1:
this.setData({
inputContent: ''
})
break;
case 2:
this.setData({
inputContent: ' '
})
this.setData({
inputContent: ''
})
break;
case 3:
this.setData({
inputContent: ' '
})
setTimeout(_ => {
this.setData({
inputContent: ''
})
}, 300)
break;
}
}
})
頁(yè)面UI，test.wxml
<view style="width: 90%; margin: 20rpx auto 0;">
<text>textarea 組件 bug</text>
<textarea placeholder="input content" value="{{inputContent}}" style="margin-top: 30rpx; border: 1rpx solid #ddd; width: 100%;"/>
<text style="color: #999; font-size: 28rpx;">上面的 textarea 組件 綁定了 inputContent 屬性</text>
</view>
<view style="width: 90%; margin: 50rpx auto 0;">
<button bindtap="clearInputContent" data-mode="1">清空內(nèi)容 方式1</button>
<text style="color: #999; font-size: 28rpx;">方式1，執(zhí)行 this.setData({inputContent: ''})</text>
</view>
<view style="width: 90%; margin: 50rpx auto 0;">
<button bindtap="clearInputContent" data-mode="2">清空內(nèi)容 方式2</button>
<text style="color: #999; font-size: 28rpx;">方式2，
執(zhí)行 this.setData({inputContent: ' '})
執(zhí)行 this.setData({inputContent: ''})
</text>
</view>
<view style="width: 90%; margin: 50rpx auto 0;">
<button bindtap="clearInputContent" data-mode="3">清空內(nèi)容 方式3</button>
<text style="color: #999; font-size: 28rpx;">方式3，
執(zhí)行 this.setData({inputContent: ' '})
執(zhí)行 setTimeout(_ => { this.setData({inputContent: ''}) }, 300)
</text>
</view>
|
