前言：這篇文章講什么

微信小程序中 textarea 組件的層級(jí)過高如何解決

前言：這篇文章對(duì)誰有用

微信小程序開發(fā)者

前言：本文有什么用？

提供解決問題的思路，供你參考

（因?yàn)闀r(shí)間關(guān)系，我沒法把代碼整理的好好的然后貼出來讓你復(fù)制黏貼?；蛘呤亲龀梢粋€(gè)組件然后開源）

前言：本文時(shí)效性

截止至2018年10月30號(hào)，微信的 textarea 還是以原生組件形式實(shí)現(xiàn)，因此層級(jí)最高。無法通過 z-index 進(jìn)行調(diào)整。在微信小程序官方把 textarea 改成了可以控制層級(jí)之前。本文中的內(nèi)容會(huì)一直有效。

1. 問題描述

根據(jù)官方文檔，textarea 是原生組件 (https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html)，所謂原生組件就是 “脫離在 WebView 渲染流程外”

文檔中的原話是：

原生組件的層級(jí)是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上。

造成的問題：

在一個(gè)可以滾動(dòng)的頁面中。textarea 中的文字會(huì)覆蓋在 position: fixed 的元素上方

經(jīng)典業(yè)務(wù)場(chǎng)景1：

頁面底部有一個(gè)固定的操作欄，比如"加入購物車"。"立即購買", 顯示價(jià)格等

經(jīng)典業(yè)務(wù)場(chǎng)景2：

頁面中有彈窗

問題截圖

我們先往頁面上放2個(gè) textarea

此時(shí)看起來暫時(shí)一切正常。

我們把底下的 textarea 輸入一些文字，

然后把頁面向上滾動(dòng)?？梢钥吹轿淖稚w住了底部的操作欄

哪怕我們不輸入任何文字，placeholder 也會(huì)直接蓋住操作欄

注意：請(qǐng)?jiān)谡鏅C(jī)中測(cè)試。微信開發(fā)者工具中看不到這樣的問題。

針對(duì)業(yè)務(wù)場(chǎng)景1（滾動(dòng)）如何解決？

僅在輸入時(shí)使用 textarea, 不輸入時(shí)使用 text 來顯示文字。內(nèi)容為空時(shí) placeholder 用 view 來實(shí)現(xiàn)。
所以一共3個(gè)元素

  <view>負(fù)責(zé)顯示placeholder</view>
  <textarea>負(fù)責(zé)輸入文字</textarea>
  <view> <text>負(fù)責(zé)顯示文字(用 text 確保換行正常)</text> </view>

當(dāng)輸入為空時(shí)，顯示 placeholder，

當(dāng)輸入不為空時(shí)，取決于當(dāng)前有沒有 focus 來判斷是顯示 textarea 還是 負(fù)責(zé)顯示文字的 view

針對(duì)業(yè)務(wù)場(chǎng)景2（彈窗）如何解決？

有彈窗的時(shí)候，就用 wx:if 把 textarea 藏起來

本文完

感想：這個(gè)破事消耗了我?guī)缀跻粋€(gè)下午。同時(shí)又對(duì)我的技術(shù)沒有任何提升，只是完成業(yè)務(wù)需求而已。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論