快捷導(dǎo)航

微信小程序textarea層級過高的解決方法

更新時(shí)間：2019年03月04日 11:00:28 作者：fozero

這篇文章主要給大家介紹了關(guān)于微信小程序textarea層級過高問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

一、前言

相信做過微信小程序開發(fā)的人應(yīng)該都碰到過這個(gè)問題，因?yàn)檫@個(gè)需求實(shí)在太常見了

由于textarea是屬于原生組件，層級最高，不管在頁面中我們設(shè)置z-index值多少都會被textarea組件遮擋住，很影響用戶體驗(yàn)，

目前官方對該問題還沒有修復(fù)，當(dāng)然官方也給出了解決該問題的其他方案，使用cover-view和 cover-image替代，但個(gè)人感覺并不是很好，有一些限制

二、使用場景及解決方案

1、彈窗顯示

2、底部fixed定位的按鈕，頁面滾動時(shí)，例如添加購物車，顯示價(jià)格

針對以上兩種業(yè)務(wù)場景解決方式不同

針對場景1彈窗顯示的處理方式

在顯示彈窗時(shí)通過if或者綁定class屬性將textarea組件隱藏，彈窗關(guān)閉時(shí)顯示，如下

 <div class="section" :class="isShowInput?'':'hidden'">
 <textarea class="content" placeholder="輸入內(nèi)容" v-model="userInfo"></textarea>
 </div>

針對場景2（滾動）如何解決

我們在輸入時(shí)使用textarea組件，不輸入的時(shí)候text來顯示文字和placeholder，這樣我們需要單獨(dú)設(shè)置幾個(gè)標(biāo)簽

<textarea>輸入內(nèi)容</textarea>
<scroll-view>用于顯示文本內(nèi)容</scroll-view>
<div class="placeholder" v-if="!content">說說對這個(gè)活動看法吧</div>

通過v-show來顯示或隱藏該組件，使用scroll-view標(biāo)簽為文本內(nèi)容設(shè)置可滾動，這里設(shè)置了isFocus聚焦，通過按鈕的形式去觸發(fā)textaare的Focus

完整代碼如下：

<textarea
 v-model="content"
 @blur="bindContentBlur"
 v-show="isInputContentFocus"
 placeholder="說說對這個(gè)活動看法吧"
 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">說說對這個(gè)活動看法吧</div>
 </scroll-view>

data() {
 return {
 isContentFocus: true,
 isInputContentFocus: false,
 isFocus: false
 };
 },

 methods: {
 bindContentFocus(e) {
 this.isFocus = true; //觸發(fā)焦點(diǎn)
 this.isContentFocus = false; //聚焦時(shí)隱藏內(nèi)容文本標(biāo)簽
 this.isInputContentFocus = true;
 console.log("Focus isFocus", this.isFocus);
 },
 bindContentBlur(e) {
 this.isContentFocus = true; //聚焦時(shí)隱藏內(nèi)容文本標(biāo)簽
 this.isInputContentFocus = false;
 this.isFocus = false; //失去焦點(diǎn)
 console.log("Blur isFocus", this.isFocus);
 }
 }

三、其他方式

官方給出了針對textarea的解決方式，使用cover-view和 cover-image替代，這兩個(gè)組件也是原生組件，可以覆蓋textarea組件

cover-image

<cover-view class="btn-save">
 <button
 class="btn btn-love btn-apply"
 @click="apply"
 :disabled="apply_status"
 v-text="apply_status?'我已報(bào)名':'我要報(bào)名'"
 ></button>
 </cover-view>

不過這里有個(gè)限制就是<cover-view/> 內(nèi)只能嵌套 <cover-view/> <cover-image/> <button/> <navigator/>組件，view 標(biāo)簽的子節(jié)點(diǎn)樹在真機(jī)上都會被忽略。

像上面場景2的需求，添加購物車，顯示價(jià)格，很明顯這種方式并不適用，當(dāng)然如果底部我們只有一個(gè)button的話是可以使用這種方式去解決的

參考閱讀

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: