《微信小程序开发从入门到实战》学习九十五

7.1 视图容器组件

7.1.4 movable-viewe和movable-area组件

scale属性用于设置是否支持双指缩放。默认支持缩放手势的区域是movable-view范围内，在movable-area组件上可以设置一个boolean类型的scale-area属性值为true时，可将缩放手势生效区域扩大为整个movable-area组件内。

movable-view与movable-area组件都需要设置width和height属性，如果不设置默认为10px。

7.1.5 cover-view组件和cover-image组件

在小程序中，微信创建了一些原生组件，包括camera、canvas、input（仅在focus时表现为原生组件）、live-player、live-pusher、map、textarea和video组件。

原生组件与非原生组件是不同的渲染流程，在界面显示有一些差异。原生组件的层级高于非原生组件。页面中的非原生组件无论将z-index设置为多少。都无法覆盖在原生组件之上。

小程序提供了cover-view和cover-image组件解决了原生组件层级最高的限制。这两是原生组件，可以覆盖部分原生组件上，包括camera、canvas、live-player、live-pusher、map、video组件。

cover-view是可覆盖原生组件上的容器组件，它内部只能包含文本或者嵌套cover-view、cover-image和button，只能包含文本、图片或按钮。

cover-image不是容器组件，作用和image组件类似，可以显示一张图片。但cover-image显示的图片可以覆盖在原生组件上，image组件不可以。cover-image的src属性，用于指定图片的路径、即网络路径或临时路径，自基础库2.2.3版本起支持云文件ID。

微信开发工具上的原生组件是用web组件模拟的，可能不能很好地还原真机的表现，开发者在使用原生组件时应该尽量在真机上进行测试。

7.2 基础内容组件

在页面中如果需要展示一些内容时，往往需要使用一些基础内容组件。

7.2.1 text组件

text组件是最常见的组件，用于在页面显示一些文本内容。可阅读第2章的text组件介绍

7.2.2 icon组件

icon是十分常见的组件，用于在页面显示一些图标。可阅读第3章的icon组件介绍

7.2.3 image组件

image组件在页面显示图片。可阅读第3章的image组件介绍

7.2.4 progress组件

progress组件是一个进度条组件，在页面显示进度条数据。支持属性如下所示：

属性	类型	默认值	说明	最低版本
precent	number		百分比	1.0.0
show-info	boolean	false	是否在进度条右侧显示百分比文字	1.0.0
border-radius	number/string	0	圆角大小	2.3.1
font-size	number/string	16	右侧百分比字体大小	2.3.1
stroke-width	number/string	6	进度条线的宽度	1.0.0
activeColor	string	#09BB07	已完成的进度条颜色	1.0.0
backgroundColor	string	#EBEBEB	进度条从左往右的颜色	1.0.0
active	boolean	false	进度条从左往右的动画	1.0.0
active-mode	string	backwards	backwards：动画从左往右播 forwards：动画从上次结束点接着播	1.7.0
bindactiveend	eventhandle		绑定动画完成事件监听函数	2.4.1