掃二維碼與項(xiàng)目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
微信小程序的map、video、canvas、camera等組件都是原生組件,層級是最高的,并不能像原生開發(fā)那樣使用z-index來控制層級。
解決方法可以采用切換隱藏等方式來做,然而地圖組件如果采用這種方式來做就會變得不便。實(shí)際上從1.4.0基礎(chǔ)庫中增加了一個組件cover-view,用于在map、video、canvas、camera等原生組件上顯示基礎(chǔ)原生視圖。在去年9月份的時候,這個問題還在微信官方團(tuán)隊(duì)在長沙的分享會上介紹到的,并以摩拜單車小程序舉例。
具體可以參考官方文檔關(guān)于cover-view介紹,同時還有一個“孿生”的組件,就是cover-image,用于在cover-view中顯示圖片。
如下圖的小demo就是利用這些組件,其中地圖上的四個模塊(搜索框、定位按鈕、切換按鈕、個人中心入口)都是利用cover-view來構(gòu)造的。
需要注意的是,cover-view和cover-image這兩個組件僅能夠嵌套在map、video、canvas、camera等原生組件里面,雖然在1.9.0開始支持嵌套在view,但嵌套到view中不是它本身的意義了。
另外需要注意的是,這兩個組件css不是支持所有的屬性,只支持基本的定位、布局、文本樣式。不支持設(shè)置單邊的border、background-image、shadow、overflow等。
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流