微信小程式textarea層級過高 蓋住其他元素

2022-06-08 06:57:09 字數 3335 閱讀 4806

根據官方文件,textarea 是原生元件 (所謂原生元件就是 「脫離在 webview 渲染流程外」

文件中的原話是:

原生元件的級是最高的,所以頁面中的其他元件無論設定 z-index 為多少,都無法在原生元件上。

頁面中有彈窗彈出層時,點選彈出層時,底層的textarea也會顯示出來,設定z-index沒作用。

針對彈窗如何解決?

找了個笨方法,有彈窗的時候,就用 wx:if 把 textarea 藏起來,彈出層隱藏的時候再顯示 textarea。

關閉彈出層的時候再顯示 textarea。

例如:

<

view

class

='form-item

flex-row'

>

<

view

class

='flex05

ali-center'

>

<

text

class

='iconfont

icon-gonggao f40 green pr8'

>

text

>

<

text

class

="f30"

>選擇型別:

text

>

view

>

<

view

class

='flex1

text-ar flex-row ali-center'

>

<

view

class

="flex-grow-1 f30"

style

="text-align: right;padding-right:10rpx"

bindtap

="toggledialog"

>

}}

view

>

<

text

class

='iconfont

icon-jiantou'

>

text

>

view

>

view

>

<

view

bindtap

="hideview"

>

<

view

class

="free-dialog }"

>

<

view

class

="free-dialog__mask"

bindtap

="toggledialog"

>

view

>

<

view

class

="free-dialog__container"

>

<

view

>

<

form

bindsubmit

='submit'

bindreset

="reset"

>

<

radio-group

class

='free-radios'

bindchange

="radiochange"

>

<

label

class

="free-radio"

bindtap

="clicked"

wx:for

="}"

wx:key

="}"

data-idx

="}"

>

<

radio

value

="}"

name

="}"

>

radio

>

<

label

class

="free-text"

>}

label

>

<

label

hidden

="}"

class

="free-icon"

bindtap

="totemplate"

data-id

="}"

>檢視模板

label

>

<

label

hidden

="}"

>暫無模板

label

>

label

>

radio-group

>

form

>

view

>

view

>

view

>

view

>

<

view

class

="textarea f30"

>

<

textarea

name

="noticecontent"

maxlength

="-1"

hidden

="}"

bindinput

="onchangenotice"

value

='}'

placeholder

auto-height cursor-spacing

="100"

>

textarea

>

view

>

js:

data: ,

radiochange:

function

(e) )

console.log(

this

.data.value)

},//

顯示彈出層

toggledialog() );

},//

點選其他位置隱藏遮罩層

hideview: function

() )

},//

點選選中

clicked: function

(e) )

console.log(

this

.data.noticetypeid)

},

微信小程式 textarea字數限制與計算

先看效果圖,是不是自己想要的 1 在textarea中繫結bindinput事件。2 通過var value e.detail.value 獲取textarea的值。3 通過 var len parseint value.length 獲取textarea的長度。wxml wxss conts ar...

微信小程式canvas元件層級最高問題解決方案

下面來看一下原型圖 實現過程中遇到的問題 解決之後的效果圖 請忽視這個醜醜的彈框 下面重點來了,我來說一下我的解決思路 我在data裡定義了乙個radarimg,然後wxml中判斷,是否這個值是否有效,若有效,canvas隱藏 否則,顯示canvas。然後在頁面渲染雷達圖時,執行了wx.canvas...

微信小程式echart使用以及層級問題

效果圖 在對應js裡 import as echarts from components ec canvas echarts.js 引用一下元件裡的js 就可以開始用了 functioninitchart canvas,width,height canvas.setchart chart varop...