小程式的textare、input輸入框層級是最高的 那麼我們在textare、input輸入的內容就會總是顯示在最上一層。

這是時為什麼呢？官方文件有說明，因為textare、input這些是原生元件。原生元件的層級是最高的，不管其它非原生元件z-index設定多大，原生元件都無法覆蓋在原生元件上。想了很久終於想到個辦法，但是並不完美。

思路：textarea輸入完成時，將textarea隱藏，將輸入內容顯示在一個text文字框，此時頁面沒有原生元件textarea，底部的價格浮層就可完美遮住輸入內容。當點選text輸入框時，又將text隱藏，顯示textarea,並將textarea的焦點選中，這樣又可以繼續輸入內容。這樣就不會有穿透問題。

WXML:

JS:

page({
    data: {
        onFocus: false,    //textarea焦點是否選中
        isShowText：false, //控制顯示 textarea 還是 text
        remark: '',        //用於儲存textarea輸入內容
    },
    onShowTextare() {       //顯示textare
        this.setData({
            isShowText: false,
            onFacus: true
        })
    },
    onShowText() {       //顯示text
        this.setData({
            isShowText: true,
            onFacus: false
        })
    },
    onRemarkInput(event) {               //儲存輸入框填寫內容
        var value = event.detail.value;
        this.setData({
            remark: value,
        });
    },
})
 

就是這樣就不完美的解決了textare穿透的問題了，輸入完成滾動頁面，底部價格浮層都可以完美遮住輸入框內容（因為此時並沒有輸入框，只有text文字框，當然不會出現層級穿透問題了）。但是當用戶在textarea正在輸入時，滾動頁面此時顯示的是textarea，並沒有輸入完成觸發事件用text替換textarea。此時任然存在穿透顯示問題。

這就是我能想到的解決辦法了。0.0  如有不足或更好的解決方案，歡迎留言交流。