![微信小程序开发实战](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=1739690766-CNdqNZf0cu2J9m38expmbGR8mqY4QkmW-0-9b7c2e7b796ea3ccc0cab3f5494e1ebc)
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=1739690766-CsBile1IoBm2U9AcY5TIlYw7byklG3dj-0-ee0e5e4af2a469d8d2ed75de3e610e05)
运行上述代码,可以看到图片会被加载到地图视图上。cover-image组件的常用属性如表3-7所示。
表3-7 cover-image组件的常用属性
![](https://epubservercos.yuewen.com/DC4D25/16793576504227606/epubprivate/OEBPS/Images/72_3.jpg?sign=1739690766-8auMTsFyAYR87IRoPiRnCNwgYf4UllfQ-0-22f898609cdb11406087491d159b8133)
cover-image组件与cover-view组件通常会组合使用,用来扩展和定制原生组件的功能。