您好,登錄后才能下訂單哦!
前言:這篇文章講什么
微信小程序中 textarea 組件的層級(jí)過(guò)高如何解決
前言:這篇文章對(duì)誰(shuí)有用
微信小程序開(kāi)發(fā)者
前言:本文有什么用?
提供解決問(wèn)題的思路,供你參考
(因?yàn)闀r(shí)間關(guān)系,我沒(méi)法把代碼整理的好好的然后貼出來(lái)讓你復(fù)制黏貼?;蛘呤亲龀梢粋€(gè)組件然后開(kāi)源)
前言:本文時(shí)效性
截止至2018年10月30號(hào),微信的 textarea 還是以原生組件形式實(shí)現(xiàn),因此層級(jí)最高。無(wú)法通過(guò) z-index 進(jìn)行調(diào)整。在微信小程序官方把 textarea 改成了可以控制層級(jí)之前。本文中的內(nèi)容會(huì)一直有效。
1. 問(wèn)題描述
根據(jù)官方文檔,textarea 是原生組件 (https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html),所謂原生組件就是 “脫離在 WebView 渲染流程外”
文檔中的原話(huà)是:
原生組件的層級(jí)是最高的,所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少,都無(wú)法蓋在原生組件上。
造成的問(wèn)題:
在一個(gè)可以滾動(dòng)的頁(yè)面中。textarea 中的文字會(huì)覆蓋在 position: fixed 的元素上方
經(jīng)典業(yè)務(wù)場(chǎng)景1:
頁(yè)面底部有一個(gè)固定的操作欄,比如"加入購(gòu)物車(chē)"。"立即購(gòu)買(mǎi)", 顯示價(jià)格等
經(jīng)典業(yè)務(wù)場(chǎng)景2:
頁(yè)面中有彈窗
問(wèn)題截圖
我們先往頁(yè)面上放2個(gè) textarea
此時(shí)看起來(lái)暫時(shí)一切正常。
我們把底下的 textarea 輸入一些文字,
然后把頁(yè)面向上滾動(dòng)??梢钥吹轿淖稚w住了底部的操作欄
哪怕我們不輸入任何文字,placeholder 也會(huì)直接蓋住操作欄
注意:請(qǐng)?jiān)谡鏅C(jī)中測(cè)試。微信開(kāi)發(fā)者工具中看不到這樣的問(wèn)題。
針對(duì)業(yè)務(wù)場(chǎng)景1(滾動(dòng))如何解決?
僅在輸入時(shí)使用 textarea, 不輸入時(shí)使用 text 來(lái)顯示文字。內(nèi)容為空時(shí) placeholder 用 view 來(lái)實(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)前有沒(méi)有 focus 來(lái)判斷是顯示 textarea 還是 負(fù)責(zé)顯示文字的 view
針對(duì)業(yè)務(wù)場(chǎng)景2(彈窗)如何解決?
有彈窗的時(shí)候,就用 wx:if 把 textarea 藏起來(lái)
本文完
感想:這個(gè)破事消耗了我?guī)缀跻粋€(gè)下午。同時(shí)又對(duì)我的技術(shù)沒(méi)有任何提升,只是完成業(yè)務(wù)需求而已。
好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。