這里遇到的問題苫纤,是動態(tài)textarea列表,底部提交按鈕position:fiexd懸浮所禀。在滑動頁面方面,textarea文本框中的文字會穿透到提交按鈕上方,顯示出來色徘。這個問題困擾我好久恭金,試了很多方法不管用,今天終于解決了褂策,趕快記下來横腿。
下面是提交按鈕的wxss樣式:
下面是提交按鈕的wxml樣式:
開始在textarea文本框上下功夫,想利用彈出層類似的方案來解決這個穿透問題斤寂,但是最終宣告失敗耿焊。
網(wǎng)上查,z-index分別在子層級遍搞,和父層級上設(shè)置這個屬性罗侯,哪個值大,哪個層級就在最上面溪猿。
于是我在textarea上钩杰,設(shè)置z-index:0,這樣,在模擬器上運(yùn)行就沒問題了诊县,但是iOS真機(jī)就無效了讲弄。z-index會失去作用。textarea輸入的內(nèi)容還是會浸透在遮蓋在textarea上的布局依痊。后來查閱官方文檔避除,發(fā)現(xiàn)用cover-view可以解決。
于是胸嘁,我把底部提交按鈕的view控件瓶摆,換成了cover-view
運(yùn)行結(jié)果,還是不行性宏,又將cover-view動態(tài)樣式里加上z-index:999赏壹,問題才解決。
textarea穿透彈窗問題
紅框就是備注textarea中的內(nèi)容衔沼,當(dāng)彈窗彈出蝌借,內(nèi)容就會穿透出來。這時用上面的z-index方面就失效了指蚁,也搞不懂是什么原因菩佑,于是通過改textarea顯示方式來解決穿透問題。
思路:就是當(dāng)彈窗彈出的時候凝化,設(shè)置一個值為true稍坯,在textarea做wx:if判斷那個值為true時,證明彈窗彈出搓劫,把textarea改成text顯示即可瞧哟。
這樣,彈窗穿透問題就解決了枪向。