掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
使用cover-view解決微信小程序地圖map等原生組件層級問題
2018-02-26 21:41
欄目：技術(shù)開發(fā)
查看(55148)
微信小程序的map、video、canvas、camera等組件都是原生組件，層級是最高的，并不能像原生開發(fā)那樣使用z-index來控制層級。
解決方法可以采用切換隱藏等方式來做，然而地圖組件如果采用這種方式來做就會變得不便。實際上從1.4.0基礎(chǔ)庫中增加了一個組件cover-view，用于在map、video、canvas、camera等原生組件上顯示基礎(chǔ)原生視圖。在去年9月份的時候，這個問題還在微信官方團隊在長沙的分享會上介紹到的，并以摩拜單車小程序舉例。
具體可以參考官方文檔關(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等。
轉(zhuǎn)載請注明出處：使用cover-view解決微信小程序地圖map等原生組件層級問題 - 微構(gòu)網(wǎng)絡(luò)
- 關(guān)于微構(gòu)
- 關(guān)于我們
- 團隊動態(tài)
- 行業(yè)資訊
- 實用知識
- 常見問題
- 聯(lián)系我們
- 電話：15574303608
- 郵箱：server@csweigou.com
- 地址：長沙市五一西路錦繡中環(huán)1116(五一廣場平和堂對面)
- 大項目團隊：長沙市芙蓉區(qū)五一大道曉園大廈17樓B座
移動版官網(wǎng)
尋找項目經(jīng)理
- 在線咨詢
- 15574303608
-
項目經(jīng)理微信
-
移動版官網(wǎng)