關於微信小程序textarea層級過高問題解決
一、前言
相信做過微信小程序開發的人應該都碰到過這個問題,因為這個需求實在太常見了
由於textarea是屬於原生組件,層級最高,不管在頁面中我們設置z-index值多少都會被textarea組件遮擋住,很影響用戶體驗,
目前官方對該問題還沒有修復,當然官方也給出了解決該問題的其他方案,使用cover-view和 cover-image替代,但個人感覺並不是很好,有一些限制
二、使用場景及解決方案
1、彈窗顯示
2、底部fixed定位的按鈕,頁面滾動時,例如添加購物車,顯示價格
針對以上兩種業務場景解決方式不同
針對場景1彈窗顯示的處理方式
在顯示彈窗時通過if或者綁定class屬性將textarea組件隱藏,彈窗關閉時顯示,如下
<div class="section" :class="isShowInput?'':'hidden'">
<textarea class="content" placeholder="輸入內容" v-model="userInfo"></textarea>
</div>
針對場景2(滾動)如何解決
我們在輸入時使用textarea組件,不輸入的時候text來顯示文字和placeholder,這樣我們需要單獨設置幾個標簽
<textarea>輸入內容</textarea>
<scroll-view>用於顯示文本內容</scroll-view>
<div class="placeholder" v-if="!content">說說對這個活動看法吧</div>
通過v-show來顯示或隱藏該組件,使用scroll-view標簽為文本內容設置可滾動,這裏設置了isFocus聚焦,通過按鈕的形式去觸發textaare的Focus
完整代碼如下:
<textarea v-model="content" @blur="bindContentBlur" v-show="isInputContentFocus" placeholder="說說對這個活動看法吧" v-bind:focus="isFocus" ></textarea> <scroll-view scroll-y class="content" v-text="content" @click="bindContentFocus" v-show="isContentFocus" > <div class="placeholder" v-if="!content">說說對這個活動看法吧</div> </scroll-view> data() { return { isContentFocus: true, isInputContentFocus: false, isFocus: false }; }, methods: { bindContentFocus(e) { this.isFocus = true; //觸發焦點 this.isContentFocus = false; //聚焦時隱藏內容文本標簽 this.isInputContentFocus = true; console.log("Focus isFocus", this.isFocus); }, bindContentBlur(e) { this.isContentFocus = true; //聚焦時隱藏內容文本標簽 this.isInputContentFocus = false; this.isFocus = false; //失去焦點 console.log("Blur isFocus", this.isFocus); } }
三、其他方式
官方給出了針對textarea的解決方式,使用cover-view和 cover-image替代,這兩個組件也是原生組件,可以覆蓋textarea組件
cover-image
<cover-view class="btn-save">
<button
class="btn btn-love btn-apply"
@click="apply"
:disabled="apply_status"
v-text="apply_status?'我已報名':'我要報名'"
></button>
</cover-view>
不過這裏有個限制就是<cover-view/> 內只能嵌套 <cover-view/> <cover-image/> <button/> <navigator/>
組件,view 標簽的子節點樹在真機上都會被忽略。
像上面場景2的需求,添加購物車,顯示價格,很明顯這種方式並不適用,當然如果底部我們只有一個button的話是可以使用這種方式去解決的
參考閱讀
https://blog.csdn.net/huobox/article/details/84859712
https://1c7.me/2018-10-30-wechat-mini-program-textarea-z-index-problem/
關於微信小程序textarea層級過高問題解決