一、前言
相信做過(guò)微信小程序開發(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-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)樹在真機(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ì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
