小程序 textarea組件層級過高導致文字穿透浮層的解決方法 ... ...
有的微信小程序開發(fā)者在做小程序時,使用到了 textarea這個小程序組件,然后點擊頁面上的某個元素,會觸發(fā)頁面彈起一個彈窗,這時發(fā)現(xiàn) textarea的 placeholder文字或者輸入的文字內(nèi)容,會直接穿透遮罩層和浮動彈窗,顯示在最上面。
那么這種情況要怎么解決?
小程序 textarea組件層級過高導致文字穿透浮層的解決方法 :
- 隱藏 textarea
這是最簡單的解決手段,一般彈窗的時候,都會帶個遮罩層,把遮罩層下面的內(nèi)容隱藏一部分,用戶基本上不會注意的,然后再去掉彈窗和遮罩層的時候再把 textarea顯示出來。 這種方法簡單有效,大部分情況下都可以這么解決。
<textarea wx:if="{{ showMask }}">textarea>復制代碼
- 使用替代元素
有時候, textarea穿透的不是遮罩層,或者遮罩層以一種半透明而非完全遮住頁面內(nèi)容的形式呈現(xiàn),擔心用戶能夠看到因為 textarea的消失而導致頁面跳動,產(chǎn)生不好的用戶體驗,那么就可以使用替代元素來替代 textarea而非將之直接隱藏掉。
基本的 textarea組件只接受文本的輸入,拋開可輸入性的話,外觀上看就是一個含有文本節(jié)點的簡單元素,只需要獲取當前狀態(tài)下的 textarea中輸入的文字,將之賦予給一個樣式與 textarea相同的普通元素,就達到了臨時替代的效果。
<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> 復制代碼
如上所示
- 由于需要實時獲取 textarea中已經(jīng)輸入的內(nèi)容,所以給 textarea元素加了個 bindinput的監(jiān)聽器
- showMask用于標識是否顯示遮罩層(或者其他可能會被 textarea穿透的浮動元素),如果顯示遮罩層,則隱藏 textarea元素,并顯示替代原宿
- 這里 textarea的隱藏使用了 wx:if,會使其徹底地從頁面中消失,而重新顯示出來的時候,textarea元素會重新創(chuàng)建,丟失原先輸入,所以給其加了個 value屬性,其值 txtRealContent就是緩存的 textarea已經(jīng)輸入的文本內(nèi)容;如果你不用這種方法,不讓 textarea完全顯示,而僅僅是隱藏,例如使用 hidden="{{ showMask ? true :false }}",因為不涉及到 textarea的刪除與重建,所以就無需添加 value屬性來控制文本內(nèi)容了。
- textarea是可以輸入可換行的文本內(nèi)容的,所以這里使用了 rich-text組件,在使用的時候,我發(fā)現(xiàn) rich-text好像不支持溢出隱藏,所以又額外在其外面包了一層 view組件,并將其高度設置為和 textarea相同
上面四個步驟,都比較簡單,稍微需要注意的是,如果 textarea的內(nèi)容包含了換行文本,則需要對換行符進行處理:
textareaContent.replace(/\n/g, ' ') 復制代碼
如果你想讓 textarea自動增加高度而不是固定高度,給 textarea加了個 auto-height,那么就需要“實時”獲取其高度 說是 “實時”,其實也并不是那么實時,不考慮其他樣式的變化, textarea的高度與行數(shù)有關,每增減一行,其高度才會變化,所以只需要監(jiān)控其內(nèi)容行數(shù)的變化即可,恰好 textarea組件也已經(jīng)提供了這個監(jiān)控器:bindlinechange。
原理說完了,完整實例代碼如下:
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> 復制代碼
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可識別的換行元素 const txtRealContent = this.data.txtContent.replace(/\n/g, ' ') this.setData({ txtRealContent }) } this.setData({ showMask: !this.data.showMask }) } }) 復制代碼
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; }
以上就是小程序 textarea組件層級過高導致文字穿透浮層的解決方法,更多小程序開發(fā)文檔可以關注網(wǎng)站。
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序請查看:小程序商店