![微信小程序开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/512/30918512/b_30918512.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
3.3 浮层视图组件
一般情况下可能不需要使用浮层视图。浮层视图组件主要用于自定义原生组件。在小程序开发中,一些提供特殊功能的组件会采用原生组件的方式进行渲染,原生组件包括map、video、canvas、camera、live-player、live-pusher。
例如,map组件专门用来创建地图视图,作为原生组件,map组件内部是不能嵌套一般的小程序视图组件的,原生组件的层级非常高,向其中加入其他视图组件不会产生任何效果。
①注意:
对于原生组件,模拟器和真机的表现形式差异很大,所以最好使用真机进行测试。
3.3.1 cover-view浮层文本视图
cover-view组件专门用于在原生组件上添加文本浮层,也可以继续进行嵌套,示例代码如下。在index.wxml文件中编写如下测试代码:
![](https://epubservercos.yuewen.com/DC4D25/16793576504227606/epubprivate/OEBPS/Images/72_1.jpg?sign=1739625721-8SBtUdSWXiL3dfwVqhX1ZusZqOGQLvft-0-b3b6345babc73add5c6d26ac1542ac4b)
map组件会在页面上渲染出一个地图视图,运行上面的代码可以看到地图效果。
cover-view组件支持定位、布局及文本样式的设置,如果要在原生组件上覆盖图片视图,则需要使用cover-image组件。
3.3.2 cover-image浮层图片视图
cover-image组件的使用和应用场景与cover-view基本一致,其拥有加载图片的功能。示例代码如下:
![](https://epubservercos.yuewen.com/DC4D25/16793576504227606/epubprivate/OEBPS/Images/72_2.jpg?sign=1739625721-9NYyVorWBGxBVUiMhpAlz6gBqeDnHZpZ-0-955a894eaecf07fd14d9edf30d9e929c)
运行上述代码,可以看到图片会被加载到地图视图上。cover-image组件的常用属性如表3-7所示。
表3-7 cover-image组件的常用属性
![](https://epubservercos.yuewen.com/DC4D25/16793576504227606/epubprivate/OEBPS/Images/72_3.jpg?sign=1739625721-v5JTEZa09FbmtyUHSujffiK0GizjNU3O-0-5eb296c38530fb6cde9815b182e5de98)
cover-image组件与cover-view组件通常会组合使用,用来扩展和定制原生组件的功能。