1. 程式人生 > >微信小程式踩坑之路--01 元件層級過高

微信小程式踩坑之路--01 元件層級過高

問題描述
我在開發小程式的過程中,遇到video,textarea等元件層級過高,其他元素無法遮蓋這些元件,讓人抓狂。
案例1
textarea元件元素過高,當有toast彈出時,文字浮於上方,效果如圖所示:這裡寫圖片描述
我們看到textarea元件文字層級高於toast,那麼怎麼解決吶?
首先我們在網上找資料,看到的大部分解決方案是讓元件隱藏,但是在這個情況下,是不合適的。我找到原因是因為出現這種情況是在頁面超出一屏,滑動的情況下,那麼我們就有解決的方案了。我們可以判斷頁面滑動的話,預設回到頂部,這樣子的話,就解決這個問題了,效果如圖。
這裡寫圖片描述
另一個原因是這個toast元件是自定義元件,層級不高,如果上面方法不合適的話,就只能選擇小程式的元件了,這就需要和設計大大溝通了。
案例2


video元件問題 :
如上圖所示,我們可以看到有一個上傳視訊的按鈕和錄製語音按鈕,點選錄製語音,會有彈框從底部彈出,但是由於video的層級過高,會懸浮於錄製語音元件中,這種情況下,我們可以選擇讓上傳視訊入口隱藏。效果如圖所示。
這裡寫圖片描述