微信小程序开发

微信小程序开发(五) 第五章表现层组件

小程序组件框架构成(第一部分)

小程序组件（启）

视图容器View container

普通视图View

滚动视图Scroll-view

滑动视图swiper

基础内容Base content

图标icon

文字text

进度progress

操作反馈Operation

上拉菜单Action-sheet

模态窗口model

自消窗口toast

页面导航Page navigation

导航navigator

小程序组件（承）

页面表单Page form

按钮button

表单form

输入input

多选checkbox

单选radio

列表选picker

内嵌列选Picker-view

滑选slider

切换switch

标签label

多媒体Multi media

音频audio

视频video

图片iimage

小程序组件（承）

地图map

地图map

画布canvas

画布canvas

客服会话session

客服会话Contact-button

第1节视图容器:VIEW CONTAINER

1.普通视图:VIEW

+横向排列

style="flex-direction:row;">

+纵向排列

style=”flex-direction:column;">

2.滚动视图:SCROLL-VIEW

+上下滚动

bg=red”>

bg=blue”>

+左右滚动

scroll-x=”true”>

3.滑动视图:SWIPER

+轮播图

duration=10>

第2节基础内容:BASE CONTENT

基础内容包括:图标,文本,进度条.

以下对三项内容分别进行详解.

1.图标:ICON

2.文本:TEXT

3.进度条:PROGRESS +图标

+文本

{{text}}

add line

remove line

Add line

Remove line

+进度条

20%

第3节页面表单:PAGE FORM

第4节操作反馈:OPERATION INTEATION

1.上拉菜单Action-sheet:

上拉菜单；

Action-sheet-item:上拉菜单项目；Action-sheet-cancel:上拉菜单取消按钮；

详见图示。

=表单组件+button

+checkBox

+radio

+input

+label

…+picker

{{ary[idx]}}+slider

+switch

+textArea

…

√

Label:user-name

12:5

12:513:0