《微信小程序开发从入门到实战》学习九十五
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 |