快捷導(dǎo)航

微信小程序textarea層級(jí)過(guò)高的解決方法

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

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

一、前言

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

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

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

二、使用場(chǎng)景及解決方案

1、彈窗顯示

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

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

針對(duì)場(chǎng)景1彈窗顯示的處理方式

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

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

針對(duì)場(chǎng)景2（滾動(dòng)）如何解決

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

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

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

完整代碼如下：

<textarea
 v-model="content"
 @blur="bindContentBlur"
 v-show="isInputContentFocus"
 placeholder="說(shuō)說(shuō)對(duì)這個(gè)活動(dòng)看法吧"
 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">說(shuō)說(shuō)對(duì)這個(gè)活動(dòng)看法吧</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);
 }
 }

三、其他方式

官方給出了針對(duì)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>

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

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

參考閱讀

總結(jié)

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

您可能感興趣的文章: