2023年微信小程序視圖容器 cover-view

微信小程序視圖容器 cover-view 是一個(gè)覆蓋在原生組件之上的文本視圖，可以嵌套在 cover-view 和 cover-image 中，并且可使用 button。該組件的長(zhǎng)度單位默認(rèn)為 px，也支持傳入單位（rpx/px）。

支持的原生組件

1. map：地圖組件
2. video：視頻組件
3. canvas：畫(huà)布組件
4. camera：相機(jī)組件
5. live-player：實(shí)時(shí)音視頻播放組件
6. live-pusher：實(shí)時(shí)音視頻推流組件

屬性

提示

• cover-view 和 cover-image 的 aria-role 僅可設(shè)置為 button，這樣在讀屏模式下才可以點(diǎn)擊，并朗讀出“按鈕”；為空時(shí)可以聚焦，但不可點(diǎn)擊
• 基礎(chǔ)庫(kù) 2.2.4 起支持 touch 相關(guān)事件，也可使用 hover-class 設(shè)置點(diǎn)擊態(tài)
• 基礎(chǔ)庫(kù) 2.1.0 起支持設(shè)置 scale、rotate 的 css 樣式，包括 transition 動(dòng)畫(huà)
• 基礎(chǔ)庫(kù) 1.9.90 起 cover-view 支持 overflow: scroll，但不支持動(dòng)態(tài)更新 overflow
• 基礎(chǔ)庫(kù) 1.9.90 起最外層 cover-view 支持 position: fixed
• 基礎(chǔ)庫(kù) 1.9.0 起支持插在 view 等標(biāo)簽下。在此之前只可嵌套在原生組件 map、video、canvas、camera 內(nèi)，避免嵌套在其他組件內(nèi)。
• 基礎(chǔ)庫(kù) 1.6.0 起支持 css transition 動(dòng)畫(huà)， transition-property 只支持 transform (translateX, translateY) 與 opacity。
• 基礎(chǔ)庫(kù) 1.6.0 起支持 css opacity。
• 事件模型遵循冒泡模型，但不會(huì)冒泡到原生組件。
• 文本建議都套上 cover-view 標(biāo)簽，避免排版錯(cuò)誤。
• 只支持基本的定位、布局、文本樣式。不支持設(shè)置單邊的 border、background-image、shadow、overflow: visible 等。
• 建議子節(jié)點(diǎn)不要溢出父節(jié)點(diǎn)
• 支持使用 z-index 控制層級(jí)
• 默認(rèn)設(shè)置的樣式有：white-space: nowrap; line-height: 1.2; display: block;
• 自定義組件嵌套 cover-view 時(shí)，自定義組件的 slot 及其父節(jié)點(diǎn)暫不支持通過(guò) wx:if 控制顯隱，否則會(huì)導(dǎo)致 cover-view 不顯示

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)標(biāo)明：himall原創(chuàng)>