微信小程序textarea層級過高的解決方法
一、前言
相信做過微信小程序開發(fā)的人應該都碰到過這個問題，因為這個需求實在太常見了
由于textarea是屬于原生組件，層級最高，不管在頁面中我們設置z-index值多少都會被textarea組件遮擋住，很影響用戶體驗，
目前官方對該問題還沒有修復，當然官方也給出了解決該問題的其他方案，使用cover-view和 cover-image替代，但個人感覺并不是很好，有一些限制
二、使用場景及解決方案
1、彈窗顯示
2、底部fixed定位的按鈕，頁面滾動時，例如添加購物車，顯示價格
針對以上兩種業(yè)務場景解決方式不同
針對場景1彈窗顯示的處理方式
在顯示彈窗時通過if或者綁定class屬性將textarea組件隱藏，彈窗關閉時顯示，如下
<div class="section" :class="isShowInput?'':'hidden'"> <textarea class="content" placeholder="輸入內(nèi)容" v-model="userInfo"></textarea> </div>
針對場景2（滾動）如何解決
我們在輸入時使用textarea組件，不輸入的時候text來顯示文字和placeholder，這樣我們需要單獨設置幾個標簽
<textarea>輸入內(nèi)容</textarea> <scroll-view>用于顯示文本內(nèi)容</scroll-view> <div class="placeholder" v-if="!content">說說對這個活動看法吧</div>
通過v-show來顯示或隱藏該組件，使用scroll-view標簽為文本內(nèi)容設置可滾動，這里設置了isFocus聚焦，通過按鈕的形式去觸發(fā)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; //觸發(fā)焦點
this.isContentFocus = false; //聚焦時隱藏內(nèi)容文本標簽
this.isInputContentFocus = true;
console.log("Focus isFocus", this.isFocus);
},
bindContentBlur(e) {
this.isContentFocus = true; //聚焦時隱藏內(nèi)容文本標簽
this.isInputContentFocus = false;
this.isFocus = false; //失去焦點
console.log("Blur isFocus", this.isFocus);
}
}
三、其他方式
官方給出了針對textarea的解決方式，使用cover-view和 cover-image替代，這兩個組件也是原生組件，可以覆蓋textarea組件
<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/> 內(nèi)只能嵌套 <cover-view/> <cover-image/> <button/> <navigator/>組件，view 標簽的子節(jié)點樹在真機上都會被忽略。
像上面場景2的需求，添加購物車，顯示價格，很明顯這種方式并不適用，當然如果底部我們只有一個button的話是可以使用這種方式去解決的
參考閱讀
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要介紹了基于純JS實現(xiàn)多張圖片的懶加載Lazy過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
JavaScript讀二進制文件并用ajax傳輸二進制流的方法
這篇文章主要介紹了JavaScript讀二進制文件并用ajax傳輸二進制流的方法的相關資料,需要的朋友可以參考下2016-07-07
這篇文章主要針對JavaScript數(shù)據(jù)類型整理的學習筆記，分享給大家，感興趣的小伙伴們可以參考一下2016-01-01
Javascript無參數(shù)和有參數(shù)類繼承問題解決方法
這篇文章主要介紹了Javascript無參數(shù)和有參數(shù)類繼承問題解決方法,本文講解了無參數(shù)類繼承的問題和有參類繼承的問題,并給出了解決方案,需要的朋友可以參考下2015-03-03
offsetleft屬性具有一定的兼容性問題，在IE7瀏覽器中，它的返回值是相對于最近的父類元素的左側(cè)的距離，本文通過代碼示例給大家介紹offsetleft兼容性問題，小伙伴們一起看看吧2015-11-11
應項目之需求，需用JS操作XML文檔，遂上網(wǎng)查資料，感覺這篇文章還不錯，特轉(zhuǎn)載到此地，與大家共享！2009-07-07
這篇文章主要介紹了javascript包裝對象,實例分析分析了javascript對象操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JavaScript中Object和Function的關系小結(jié)
JavaScript 中 Object 和 Function 的關系是微妙的，他們互為對方的一個實例。2009-09-09
網(wǎng)頁自動跳轉(zhuǎn)代碼收集2009-09-09
下面小編就為大家?guī)硪黄猨s 彈出對話框(遮罩)透明,可拖動的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07