前言:這篇文章講什么
微信小程序中 textarea 組件的層級過高如何解決
前言:這篇文章對誰有用
微信小程序開發(fā)者
前言:本文有什么用?
提供解決問題的思路,供你參考
(因為時間關(guān)系,我沒法把代碼整理的好好的然后貼出來讓你復(fù)制黏貼?;蛘呤亲龀梢粋€組件然后開源)
前言:本文時效性
截止至2018年10月30號,微信的 textarea 還是以原生組件形式實現(xiàn),因此層級最高。無法通過 z-index 進行調(diào)整。在微信小程序官方把 textarea 改成了可以控制層級之前。本文中的內(nèi)容會一直有效。
1. 問題描述
根據(jù)官方文檔,textarea 是原生組件 (https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html),所謂原生組件就是 “脫離在 WebView 渲染流程外”
文檔中的原話是:
原生組件的層級是最高的,所以頁面中的其他組件無論設(shè)置 z-index 為多少,都無法蓋在原生組件上。
造成的問題:
在一個可以滾動的頁面中。textarea 中的文字會覆蓋在 position: fixed 的元素上方
經(jīng)典業(yè)務(wù)場景1:
頁面底部有一個固定的操作欄,比如"加入購物車"。"立即購買", 顯示價格等
經(jīng)典業(yè)務(wù)場景2:
頁面中有彈窗
問題截圖
我們先往頁面上放2個 textarea
此時看起來暫時一切正常。
我們把底下的 textarea 輸入一些文字,
然后把頁面向上滾動??梢钥吹轿淖稚w住了底部的操作欄
哪怕我們不輸入任何文字,placeholder 也會直接蓋住操作欄
注意:請在真機中測試。微信開發(fā)者工具中看不到這樣的問題。
針對業(yè)務(wù)場景1(滾動)如何解決?
僅在輸入時使用 textarea, 不輸入時使用 text 來顯示文字。內(nèi)容為空時 placeholder 用 view 來實現(xiàn)。
所以一共3個元素
<view>負責(zé)顯示placeholder</view> <textarea>負責(zé)輸入文字</textarea> <view> <text>負責(zé)顯示文字(用 text 確保換行正常)</text> </view>
分享名稱:微信小程序textarea層級過高(蓋住其他元素)問題的解決辦法-創(chuàng)新互聯(lián)
文章鏈接:http://bm7419.com/article22/gdsjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、云服務(wù)器、響應(yīng)式網(wǎng)站、服務(wù)器托管、虛擬主機、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容