前言：這篇文章講什么

我們擁有十余年網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站建設(shè)經(jīng)驗(yàn)，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)、H5場(chǎng)景定制、等業(yè)務(wù)。無(wú)論您有什么樣的網(wǎng)站設(shè)計(jì)或者設(shè)計(jì)方案要求，我們都將富于創(chuàng)造性的提供專(zhuān)業(yè)設(shè)計(jì)服務(wù)并滿足您的需求。

微信小程序中 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 渲染流程外”

文檔中的原話是：

原生組件的層級(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>

分享名稱(chēng)：微信小程序textarea層級(jí)過(guò)高(蓋住其他元素)問(wèn)題的解決辦法-創(chuàng)新互聯(lián)
文章鏈接：http://aaarwkj.com/article22/gdsjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、云服務(wù)器、響應(yīng)式網(wǎng)站、服務(wù)器托管、虛擬主機(jī)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)