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

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

思路:textarea輸入完成時,將textarea隱藏,將輸入內容顯示在一個text文字框,此時頁面沒有原生元件textarea,底部的價格浮層就可完美遮住輸入內容。當點選text輸入框時,又將text隱藏,顯示textarea,並將textarea的焦點選中,這樣又可以繼續輸入內容。這樣就不會有穿透問題。主要運用了textarea的bindblur(輸入框失去焦點觸發事件)、bindconfirm(輸入點選完成觸發事件)、focus(獲取焦點 Boolean)。

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  如有不足或更好的解決方案,歡迎留言交流。