最近做的一個(gè)小程序需求,其中一個(gè)頁(yè)面使用到了 textarea這個(gè)小程序組件,然后點(diǎn)擊頁(yè)面上的某個(gè)元素,會(huì)觸發(fā)頁(yè)面彈起一個(gè)彈窗,這時(shí)發(fā)現(xiàn) textarea的 placeholder文字或者輸入的文字內(nèi)容,會(huì)直接穿透遮罩層和浮動(dòng)彈窗,顯示在最上面,開(kāi)始時(shí)我以為是遮罩層和浮動(dòng)彈窗的層級(jí)舍得小了,于是改大,誰(shuí)知道沒(méi)用,改到了 99999也沒(méi)用,于是我意識(shí)到這應(yīng)該不是我代碼的問(wèn)題,網(wǎng)上一搜,果然有故事。
這是最簡(jiǎn)單的解決手段,一般彈窗的時(shí)候,都會(huì)帶個(gè)遮罩層,把遮罩層下面的內(nèi)容隱藏一部分,用戶基本上不會(huì)注意的,然后再去掉彈窗和遮罩層的時(shí)候再把 textarea顯示出來(lái)。 這種方法簡(jiǎn)單有效,大部分情況下都可以這么解決。
<textarea wx:if="{{ showMask }}">textarea> 復(fù)制代碼
有時(shí)候, textarea穿透的不是遮罩層,或者遮罩層以一種半透明而非完全遮住頁(yè)面內(nèi)容的形式呈現(xiàn),擔(dān)心用戶能夠看到因?yàn)?nbsp;textarea的消失而導(dǎo)致頁(yè)面跳動(dòng),產(chǎn)生不好的用戶體驗(yàn),那么就可以使用替代元素來(lái)替代 textarea而非將之直接隱藏掉。
基本的 textarea組件只接受文本的輸入,拋開(kāi)可輸入性的話,外觀上看就是一個(gè)含有文本節(jié)點(diǎn)的簡(jiǎn)單元素,只需要獲取當(dāng)前狀態(tài)下的 textarea中輸入的文字,將之賦予給一個(gè)樣式與 textarea相同的普通元素,就達(dá)到了臨時(shí)替代的效果。
<textarea id="text-area" value="{{txtRealContent}}" bindinput='txtInput' wx:if="{{!showMask}}" /> <view class='rich-text' style="{{('height:' + txtHeight + 'px')}}" wx:else> <rich-text nodes="{{txtRealContent}}">rich-text> view> 復(fù)制代碼
如上所示
上面四個(gè)步驟,都比較簡(jiǎn)單,稍微需要注意的是,如果 textarea的內(nèi)容包含了換行文本,則需要對(duì)換行符進(jìn)行處理:
textareaContent.replace(/\n/g, ' ') 復(fù)制代碼
如果你想讓 textarea自動(dòng)增加高度而不是固定高度,給 textarea加了個(gè) auto-height,那么就需要“實(shí)時(shí)”獲取其高度 說(shuō)是 “實(shí)時(shí)”,其實(shí)也并不是那么實(shí)時(shí),不考慮其他樣式的變化, textarea的高度與行數(shù)有關(guān),每增減一行,其高度才會(huì)變化,所以只需要監(jiān)控其內(nèi)容行數(shù)的變化即可,恰好 textarea組件也已經(jīng)提供了這個(gè)監(jiān)控器:bindlinechange。
原理說(shuō)完了,完整實(shí)例代碼如下:
index.wxml
<view class="page-body"> <button bindtap="changeMaskVisible">切換maskbutton> <view class="textarea-wrp"> <textarea id="text-area" value="{{txtContent}}" bindinput='txtInput' bindlinechange="textAreaLineChange" wx:if="{{!showMask}}" auto-height /> <view class='rich-text' style="{{('height:' + txtHeight + 'px')}}" wx:else> <rich-text nodes="{{txtRealContent}}">rich-text> view> view> <button>Footerbutton> <view wx:if="{{showMask}}" bindtap="changeMaskVisible" class="mask"> <view class="mask-content">view> view> view> 復(fù)制代碼
index.js
Page({ data: { txtRealContent: '', txtContent: '', showMask: false, txtHeight: 0 }, textAreaLineChange(e) { this.setData({ txtHeight: e.detail.height }) }, txtInput(e) { this.setData({ txtContent: e.detail.value }) }, changeMaskVisible(e) { if (!this.data.showMask) { // 將換行符轉(zhuǎn)換為wxml可識(shí)別的換行元素 const txtRealContent = this.data.txtContent.replace(/\n/g, ' ') this.setData({ txtRealContent }) } this.setData({ showMask: !this.data.showMask }) } }) 復(fù)制代碼
index.wxss
.rich-text { overflow: hidden; } .mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .6); z-index: 10; } .mask-content { position: fixed; top: 44%; left: 50%; height: 60%; width: 60%; transform: translate(-50%, -50%); background-color: yellowgreen; z-index: 12; }
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)