真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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

一、前言

創(chuàng)新互聯(lián)是一家專業(yè)提供定西企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站建設(shè)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為定西眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

相信做過微信小程序開發(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定位的按鈕，頁面滾動(dòng)時(shí)，例如添加購物車，顯示價(jià)格

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

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

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

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

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

輸入內(nèi)容
用于顯示文本內(nèi)容
說說對這個(gè)活動(dòng)看法吧

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

完整代碼如下：



 
 說說對這個(gè)活動(dòng)看法吧
 

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

不過這里有個(gè)限制就是 內(nèi)只能嵌套