微信小程序开发图解案例教程第3章-用微信小程序组件构建UI界面课件.pptx

1、微信小程序开发图解案例教程（附精讲视频）（第2版）刘刚刘刚 著著视图容器组件视图容器组件 基础内容组件基础内容组件 丰富的表单组件丰富的表单组件 导航组件导航组件 媒体组件媒体组件 地图组件地图组件 画布组件画布组件 沙场大练兵：表单登录注册微信小程序沙场大练兵：表单登录注册微信小程序 小结小结 第第3 3章章 用用微信小程序组件构建微信小程序组件构建UIUI界面界面 视图视图容器组件共有容器组件共有5 5种：种：VIEWVIEW视图容器、视图容器、SCROLL-VIEWSCROLL-VIEW可滚动可滚动视图区域、视图区域、SWIPERSWIPER滑块视图滑块视图容器、容器、MOVABLE-V

2、IEWMOVABLE-VIEW可移动视图容器、可移动视图容器、COVER-VIEWCOVER-VIEW覆盖原生组件的视图容器。覆盖原生组件的视图容器。3.13.1视图容器组件视图容器组件 VIEW VIEW视图容器是视图容器是WXMLWXML界面布局的基础组件，界面布局的基础组件，它的使用和它的使用和HTMLHTML里的里的DIVDIV类似，主要用于界面类似，主要用于界面的的布局。布局。VIEW VIEW视图容器也有自己的属性，如表视图容器也有自己的属性，如表3.13.1所示。所示。3.1.13.1.1VIEWVIEW视图容器视图容器表表3.1view属性属性 在在WXMLWXML界面里使用界

3、面里使用VIEWVIEW布局，布局，渲染出界面内容，如图渲染出界面内容，如图3.13.1所示。所示。图图3.1view布局布局 SCROLL-VIEW SCROLL-VIEW可滚动视图区域允许视图区域内容横向滚动或者纵可滚动视图区域允许视图区域内容横向滚动或者纵向滚动，类似于浏览器的横向滚动条和垂直滚动条，向滚动，类似于浏览器的横向滚动条和垂直滚动条，SCROLL-VIEWSCROLL-VIEW拥拥有自己的属性和事件，如表有自己的属性和事件，如表3.23.2所示。所示。3.1.23.1.2SCROLL-VIEWSCROLL-VIEW可滚动视图区域可滚动视图区域表表3.2scroll-view属

4、性属性1 1纵向滚动纵向滚动 允许允许内容纵向滚动，需要给内容纵向滚动，需要给 VIEW/一个固定高度，可以绑定一个固定高度，可以绑定滚动滚动到到顶部顶部/左边（左边（BINDSCROLLTOUPPERBINDSCROLLTOUPPER）、）、滚动到底部滚动到底部/右边（右边（BINDSCROLLTOLOWERBINDSCROLLTOLOWER）、）、滚动时（滚动时（BINDSCROLLBINDSCROLL）触发的事件，）触发的事件，也也可以可以滚动到指定的滚动到指定的IDID区域（区域（SCROLL-SCROLL-INTO-VIEWINTO-VIEW）。下面下面实现纵向滚动，如图实现纵向滚动

5、，如图3.23.2所示。所示。图图3.2纵向滚动纵向滚动（1 1）在）在WXMLWXML文件里使用文件里使用SCROLL-VIEWSCROLL-VIEW进行布局，设置进行布局，设置SCROLL-YSCROLL-Y=“TRUE”=“TRUE”纵向纵向滚动，绑定滚动，绑定BINDSCROLLTOUPPERBINDSCROLLTOUPPER、BINDSCROLLTOLOWERBINDSCROLLTOLOWER、BINDSCROLLBINDSCROLL、SCROLL-INTO-VIEWSCROLL-INTO-VIEW、SCROLL-TOPSCROLL-TOP事件。事件。（2 2）在）在JSJS文件里设

6、置颜色的数组，绑定文件里设置颜色的数组，绑定TOVIEWTOVIEW和和SCROLLTOPSCROLLTOP数据数据值，提值，提供供BINDSCROLLTOUPPERBINDSCROLLTOUPPER、BINDSCROLLTOLOWERBINDSCROLLTOLOWER、BINDSCROLLBINDSCROLL、SCROLL-SCROLL-INTO-VIEWINTO-VIEW、SCROLL-TOPSCROLL-TOP事件事件函数。函数。2 2横向滚动横向滚动 在在使用使用“今日头条今日头条”或或“腾讯新腾讯新闻闻”时，在新闻列表的上方都会有新时，在新闻列表的上方都会有新闻频道供我们选择，可以向

7、左闻频道供我们选择，可以向左滑动和滑动和向右滑动来查看相应类别的新闻，可向右滑动来查看相应类别的新闻，可以采用以采用SCROLL-VIEWSCROLL-VIEW来实现这些新闻来实现这些新闻频道的横向滚动，如图频道的横向滚动，如图3.33.3所示。所示。图图3.3今日头条新闻频道今日头条新闻频道 SWIPERSWIPER滑块视图容器用来在指定区域内切换显示内容，常用来制滑块视图容器用来在指定区域内切换显示内容，常用来制作海报轮播效果和页签内容切换效果作海报轮播效果和页签内容切换效果，它，它的属性如表的属性如表3.33.3所示。所示。3.1.33.1.3SWIPERSWIPER滑块视图容器滑块视图

8、容器表表3.3swiper属性属性1 1海报轮播效果海报轮播效果 海报海报轮播效果常用来展示商品图片信息或者广告信息，是很多网轮播效果常用来展示商品图片信息或者广告信息，是很多网站或者站或者APPAPP软件都会采用的一种布局软件都会采用的一种布局方式方式，如图，如图3.43.4、图、图3.53.5所示。所示。图图3.4海报海报1图图3.5海报海报2（1 1）在）在WXMLWXML文件里，采用文件里，采用SWIPERSWIPER滑块视图容器组件进行海报轮播区滑块视图容器组件进行海报轮播区域的布局。域的布局。（2 2）在）在JSJS文件里，提供海报轮播的图片，设置是否自动播放，提供文件里，提供海报

9、轮播的图片，设置是否自动播放，提供轮播的时长等数据，通过数据轮播的时长等数据，通过数据绑定的绑定的方式渲染到页面方式渲染到页面上。上。2 2页签内容切换效果页签内容切换效果 SWIPERSWIPER滑块视图容器除了可以用来滑块视图容器除了可以用来实现海报轮播效果，还可以实现页签切实现海报轮播效果，还可以实现页签切换效果换效果。页页签切换效果常用签切换效果常用于多种于多种方式的登方式的登录或者多种类别的切换，如图录或者多种类别的切换，如图3.63.6所示。所示。图图3.6页签切换效果页签切换效果（1 1）进入到）进入到WXMLWXML文件里，进行账号密码登录和手机快捷登录的界面文件里，进行账号密

10、码登录和手机快捷登录的界面布局设计。布局设计。（2 2）进入到）进入到WXSSWXSS文件里，给页面文件添加文件里，给页面文件添加样式。样式。（3 3）进入到）进入到JSJS文件里，提供窗口的宽度、高度、当前面板的索引值，文件里，提供窗口的宽度、高度、当前面板的索引值，提供页签切换提供页签切换函数。函数。MOVABLE-VIEWMOVABLE-VIEW是一个可移动视图容器，在页面中可以做拖曳滑动是一个可移动视图容器，在页面中可以做拖曳滑动。在在使用这个组件的时候，需要先使用这个组件的时候，需要先定义定义可移动区域可移动区域MOVABLE-AREAMOVABLE-AREA，然，然后定义直接子节点

11、后定义直接子节点MOVABLE-VIEWMOVABLE-VIEW，否则不能移动，否则不能移动。MOVABLE-AREA MOVABLE-AREA必须设置必须设置WIDTHWIDTH和和HEIGHTHEIGHT属性，不设置默认为属性，不设置默认为10PX10PX；MOVABLE-VIEWMOVABLE-VIEW必须必须设置设置WIDTHWIDTH和和HEIGHTHEIGHT属性，不设置默认为属性，不设置默认为10PX10PX，MOVABLE-VIEWMOVABLE-VIEW默认默认为绝对定位，为绝对定位，TOPTOP和和LEFTLEFT属性为属性为0PX0PX。MOVABLE-VIEW MOVA

12、BLE-VIEW可移动视图容器的属性如表可移动视图容器的属性如表3.43.4所示。所示。3.1.43.1.4MOVABLE-VIEWMOVABLE-VIEW可移动视图容器可移动视图容器表表3.4movable-view属性属性 MOVABLE-VIEW MOVABLE-VIEW提供了两个特殊事件：提供了两个特殊事件：HTOUCHMOVEHTOUCHMOVE事件，指初次手事件，指初次手指触摸后的移动为横向移动，指触摸后的移动为横向移动，如果如果CATCHCATCH此事件，则意味着此事件，则意味着TOUCHMOVETOUCHMOVE事件也被事件也被CATCHCATCH；VTOUCHMOVEVTOU

13、CHMOVE事件，指初次手指触摸后的移动为纵向事件，指初次手指触摸后的移动为纵向移移动，如果动，如果CATCHCATCH此事件，则意味着此事件，则意味着TOUCHMOVETOUCHMOVE事件也被事件也被CATCHCATCH。下面下面使用使用MOVABLE-VIEWMOVABLE-VIEW可移动视图容器组件来进行滑动，黄色区可移动视图容器组件来进行滑动，黄色区域代表可以移动的区域，红色方块域代表可以移动的区域，红色方块代表代表可以移动的组件，如图可以移动的组件，如图3.73.7所示。所示。图图3.7可移动视图容器可移动视图容器（1 1）在）在WXMLWXML文件里，使用文件里，使用MOVABL

14、E-AREAMOVABLE-AREA和和MOVABLE-VIEWMOVABLE-VIEW视图容器组视图容器组件进行布局。件进行布局。（2 2）在）在JSJS文件里，提供拖动函数、缩放函数，通过数据绑定的方式文件里，提供拖动函数、缩放函数，通过数据绑定的方式渲染到页面渲染到页面上。上。COVER-VIEWCOVER-VIEW、COVER-IMAGECOVER-IMAGE这两个是覆盖原生组件的视图容器这两个是覆盖原生组件的视图容器。比如比如在使用地图组件时，地图组件在使用地图组件时，地图组件本身本身的功能很有局限，但是想放的功能很有局限，但是想放置一些特殊的内容或图片，这时就需要使用覆盖地图组件的

15、视图容器。置一些特殊的内容或图片，这时就需要使用覆盖地图组件的视图容器。COVER-VIEWCOVER-VIEW是指覆盖在原生组件之上的文本视图，可覆盖的原生组是指覆盖在原生组件之上的文本视图，可覆盖的原生组件包括件包括MAPMAP、VIDEOVIDEO、CANVASCANVAS、CAMERACAMERA，只支持嵌套，只支持嵌套COVER-VIEWCOVER-VIEW、COVER-COVER-IMAGEIMAGE。COVER-IMAGECOVER-IMAGE是指覆盖在原生组件之上的图片视图，可覆盖的原生是指覆盖在原生组件之上的图片视图，可覆盖的原生组件同组件同COVER-VIEWCOVER-V

16、IEW一样，支持一样，支持嵌套嵌套COVER-VIEWCOVER-VIEW。3.1.53.1.5COVER-VIEWCOVER-VIEW覆盖原生组件的视图容器覆盖原生组件的视图容器 下面下面使用使用COVER-VIEWCOVER-VIEW、COVER-IMAGECOVER-IMAGE覆盖原生组件的视图容器组覆盖原生组件的视图容器组件，在件，在VIDEOVIDEO视频播放组件上放置视频播放组件上放置播放播放、暂停两个图片，同时放置一、暂停两个图片，同时放置一个时间内容显示区域，如图个时间内容显示区域，如图3.83.8、图、图3.93.9所示。所示。图图3.8视频播放视频播放图图3.9覆盖视频播放

17、组件覆盖视频播放组件（1 1）在）在WXMLWXML文件里使用文件里使用COVER-VIEWCOVER-VIEW、COVER-IMAGECOVER-IMAGE覆盖原生组件的视覆盖原生组件的视图容器组件进行布局。图容器组件进行布局。（2 2）在）在WXSSWXSS文件里添加样式。文件里添加样式。（3 3）在）在JSJS文件里，提供视频播放、暂停函数，初始化视频播放文件里，提供视频播放、暂停函数，初始化视频播放组件。组件。基础基础内容组件包括内容组件包括ICONICON图标组件、图标组件、TEXTTEXT文本组件、文本组件、PROGREEPROGREE进度条组件、进度条组件、RICH-TEXTRI

18、CH-TEXT富富文本组件文本组件。3.2.13.2.1ICONICON图标图标 微微信小程序提供了丰富的图标组件，信小程序提供了丰富的图标组件，这些图标组件应用于不同的场景，有成这些图标组件应用于不同的场景，有成功、警告、提示、取消、功、警告、提示、取消、下载下载等不同含等不同含义，如图义，如图3.103.10所示。所示。3.23.2基础内容组件基础内容组件图图3.10图标图标 ICON ICON图标组件有图标组件有3 3个属性：图标的类型个属性：图标的类型TYPETYPE、图标的大小、图标的大小SIZESIZE和和图标的颜色图标的颜色COLORCOLOR，如表，如表3.53.5所示。所示。

19、表表3.5图标属性图标属性 TEXTTEXT文本组件支持转义符文本组件支持转义符，比如换行，比如换行NN、空格、空格TT。/组件组件内只内只支持支持/嵌套嵌套，除了文本，除了文本节点节点以外的其他节以外的其他节点都无法长按选中。点都无法长按选中。3.2.23.2.2TEXTTEXT文本文本 下面下面我们来看转义符的使用，具体代码如下：我们来看转义符的使用，具体代码如下：-AREA=BODY-VIEW我爱北京我爱北京TT我爱中国我爱中国我爱北京我爱北京NN我爱中国我爱中国 界面界面效果如图效果如图3.113.11所示。所示。从从图图3.113.11中可以看出，中可以看出，TT具有空格功能，具有空

20、格功能，NN具有换行功能，同时具有换行功能，同时也可以看出也可以看出TEXTTEXT文本组件是放置在同一行里，这一点不同于文本组件是放置在同一行里，这一点不同于VIEWVIEW组件，组件，每个每个VIEWVIEW组件都是单独一行。组件都是单独一行。图图3.11转义符效果转义符效果 PROGRESSPROGRESS进度条组件是一种提高用户体验度的组件，可以通过进进度条组件是一种提高用户体验度的组件，可以通过进度条看到完整视频的长度、当前播放度条看到完整视频的长度、当前播放的进度的进度，这样让用户能合理地安，这样让用户能合理地安排自己的时间，提高用户体验度排自己的时间，提高用户体验度。微微信小程序

21、也提供了信小程序也提供了PROGRESSPROGRESS进度条组件进度条组件，它，它的属性如表的属性如表3.63.6所所示。示。3.2.33.2.3PROGRESSPROGRESS进度条进度条表表3.6进度条属性进度条属性 示例示例代码如下：代码如下：20SHOW-INFO/80ACTIVE/界面界面效果如图效果如图3.123.12所示。所示。图图3.12进度条效果进度条效果 RICH-TEXTRICH-TEXT富文本组件，可以在富文本组件，可以在WXMLWXML页面文件显示一些富文本页面文件显示一些富文本内容，内容，比如比如显示显示HTMLHTML的一些元素的一些元素内容内容。它有一个。它有

22、一个NODESNODES节点列表属性，节点列表属性，NODESNODES属属性性推荐推荐使用使用ARRAYARRAY类型类型，由于组件会，由于组件会将将STRINGSTRING类型类型转换转换为为ARRAYARRAY类型类型，因，因而性能会有所下降而性能会有所下降。NODES NODES支持两种节点，通过支持两种节点，通过TYPETYPE来区分，分别是元素节点和文本节来区分，分别是元素节点和文本节点，如表点，如表3.73.7和表和表3.83.8所示，它默认的是元素节点，即在富文本区域里显所示，它默认的是元素节点，即在富文本区域里显示的示的HTMLHTML节点。节点。3.2.43.2.4RICH

23、-TEXTRICH-TEXT富文本富文本1 1元素节点：元素节点：TYPE=NODETYPE=NODE表表3.7元素节点元素节点2 2文本节点：文本节点：TYPE=TEXTTYPE=TEXT表表3.8文本节点文本节点 微微信小程序提供了丰富的表单组件：信小程序提供了丰富的表单组件：BUTTONBUTTON按钮组件、按钮组件、CHECKBOXCHECKBOX多项多项选择器选择器组件组件、RADIORADIO单项选择器组件、单项选择器组件、INPUTINPUT单行输入框组件、单行输入框组件、TEXTAREATEXTAREA多多行输入框组件、行输入框组件、LABELLABEL改进改进表单可用性组件、

24、表单可用性组件、PICKERPICKER滚动选择器组件、滚动选择器组件、SLIDERSLIDER滑动选择器组件、滑动选择器组件、SWITCHSWITCH开关选择开关选择器组件器组件、FORMFORM表单组件表单组件1010种表单种表单组件。组件。3.33.3丰富的表单组件丰富的表单组件 BUTTONBUTTON按钮组件提供按钮组件提供3 3种类型按钮：种类型按钮：基本类型按钮、默认类型按钮和警告类基本类型按钮、默认类型按钮和警告类型按钮型按钮。同时同时提供两种提供两种大小形状大小形状的按钮：默的按钮：默认和认和MINIMINI两种大小按钮，如图两种大小按钮，如图3.133.13所示。所示。BU

25、TTONBUTTON按钮组件有很多属性，每个按钮组件有很多属性，每个属性有不同的作用，如表属性有不同的作用，如表3.93.9所示。所示。3.3.13.3.1BUTTONBUTTON按钮按钮图图3.13按钮类型和大小按钮类型和大小表表3.9按钮属性按钮属性 从从按钮属性中可以看出按钮可以按钮属性中可以看出按钮可以设置不同大小、不同类型、是否镂空、设置不同大小、不同类型、是否镂空、是否禁用、按钮名称前是否是否禁用、按钮名称前是否带带LOADINGLOADING图标图标。针对针对FORMFORM表单组件，按钮组件提表单组件，按钮组件提供了提交表单和重置表单两个供了提交表单和重置表单两个功能。功能。界

26、面界面效果如图效果如图3.143.14所示。所示。图图3.14按钮效果按钮效果 CHECKBOXCHECKBOX多项选择器组件，也就是我们常说的复选框，它用来进多项选择器组件，也就是我们常说的复选框，它用来进行多项选择，它的属性如表行多项选择，它的属性如表3.103.10所示。所示。3.3.23.3.2CHECKBOXCHECKBOX多项选择器多项选择器表表3.10多项选择器属性多项选择器属性 CHECKBOX-GROUP CHECKBOX-GROUP是用来容纳多个是用来容纳多个CHECKBOXCHECKBOX多项选择器的容器，它多项选择器的容器，它有一个绑定事件有一个绑定事件BINDCHAN

27、GEBINDCHANGE，/中选中项发生改变时中选中项发生改变时触发触发CHANGECHANGE事件事件，DETAIL=DETAIL=VALUE:VALUE:选中的选中的CHECKBOXCHECKBOX的的VALUEVALUE的数组的数组。下面下面演示一下演示一下CHECKBOXCHECKBOX多项选择器的使用，以及如何获取选中的多项选择器的使用，以及如何获取选中的VALUEVALUE值。值。（1 1）在）在WXMLWXML文件里使用文件里使用CHECKBOXCHECKBOX进行界面布局，具体代码如下所示。进行界面布局，具体代码如下所示。=USA/美国美国=TRUE/中国中国=BRA/巴西巴西

28、=JPN/日本日本/英国英国（2 2）在）在JSJS文件里，添加文件里，添加CHECKBOXCHANGECHECKBOXCHANGE事件事件函数，获取复选框选中函数，获取复选框选中的值，将其打印出来，具体的值，将其打印出来，具体代码如下代码如下所示。所示。PAGE(PAGE(CHECKBOXCHANGE:FUNCTIONCHECKBOXCHANGE:FUNCTION(E)(E)CONSOLE.LOG(CONSOLE.LOG(E.DETAIL.VALUEE.DETAIL.VALUE)界面界面效果如图效果如图3.153.15所示。所示。从从图图3.153.15中可以看出，被禁用的复选框是不能使用的

29、，在中可以看出，被禁用的复选框是不能使用的，在CHECKBOX-CHECKBOX-GROUPGROUP上面绑定上面绑定BINDCHANGEBINDCHANGE事件事件，每次，每次勾选时，会把所有勾选的复选框的勾选时，会把所有勾选的复选框的值以数组的形式存在值以数组的形式存在DETAILDETAIL里。里。图图3.15复选框复选框value值值 RADIO RADIO单项选择器是与单项选择器是与CHECKBOXCHECKBOX多项选择器对立的一个组件，每多项选择器对立的一个组件，每次只能选中一个次只能选中一个RADIORADIO单项选择器，单项选择器，选项间选项间是一种互斥关系，它的属是一种互斥

30、关系，它的属性如表性如表3.113.11所示。所示。3.3.33.3.3RADIORADIO单项选择器单项选择器表表3.11单项选择器属性单项选择器属性 RADIO-GROUP RADIO-GROUP是用来容纳多个是用来容纳多个RADIORADIO单项选择器的容器，它有一单项选择器的容器，它有一个绑定事件个绑定事件BINDCHANGEBINDCHANGE，RADIO-GROUP/中中的选中项发生变化时的选中项发生变化时触触发发BINDCHANGEBINDCHANGE事件，事件，EVENT.DETAILEVENT.DETAIL=VALUEVALUE:选中选中项项RADIORADIO的的VALUE

31、VALUE。下面演示一下下面演示一下RADIORADIO单项选择器的使用。单项选择器的使用。（1 1）在）在WXMLWXML文件里使用文件里使用RADIORADIO单项选择器进行界面布局，具体代码单项选择器进行界面布局，具体代码如下所示。如下所示。/美国美国/中国中国/巴西巴西/日本日本/英国英国（2 2）在）在JSJS文件里，添加文件里，添加RADIOCHANGERADIOCHANGE事件事件函数，获取单项选中的函数，获取单项选中的值，将其打印出来，具体代码值，将其打印出来，具体代码如下所如下所示。示。PAGE(PAGE(RADIOCHANGE:FUNCTIONRADIOCHANGE:FUN

32、CTION(E)(E)CONSOLE.LOG(RADIOCONSOLE.LOG(RADIO发生发生CHANGECHANGE事件，携带事件，携带VALUEVALUE值值为：为：,E.DETAIL.VALUEE.DETAIL.VALUE)界面界面效果如图效果如图3.163.16所示。所示。从从图图3.163.16中可以看出，被禁用的单项选择器是不能使用的，在中可以看出，被禁用的单项选择器是不能使用的，在RADIO-GROUPRADIO-GROUP上面绑定上面绑定BINDCHANGEBINDCHANGE事件事件，每次，每次勾选时，只能使一个选勾选时，只能使一个选项呈现为选中状态，同时会把相应的值存在

33、项呈现为选中状态，同时会把相应的值存在DETAILDETAIL里。里。图图3.16单项选择器单项选择器value值值 INPUTINPUT单行输入框，用来输入单行文本内容，它的属性如表单行输入框，用来输入单行文本内容，它的属性如表3.123.12所示。所示。3.3.43.3.4INPUTINPUT单行输入框单行输入框表表3.12单行输入框属性单行输入框属性续表续表 从从表表3.123.12单行输入框属性里可以看出：单行输入框属性里可以看出：（1 1）可以设置）可以设置INPUTINPUT输入框的类型有输入框的类型有TEXTTEXT、NUMBERNUMBER、IDCARDIDCARD、DIGIT

34、DIGIT；（2 2）可以设置输入框是否为密码类型，如果是密码类型，则会用点号）可以设置输入框是否为密码类型，如果是密码类型，则会用点号代替具体值显示代替具体值显示；（3 3）通过）通过PLACEHOLDERPLACEHOLDER来给输入框添加类似于来给输入框添加类似于“请输入手机号请输入手机号/用户名用户名/邮箱邮箱”这样友好的提示信息这样友好的提示信息，PLACEHOLDER-STYLEPLACEHOLDER-STYLE设置提示信息的样式，设置提示信息的样式，PLACEHOLDER-CLASSPLACEHOLDER-CLASS设置提示信息的设置提示信息的CLASSCLASS，然后再针对这个

35、，然后再针对这个CLASSCLASS添加添加样式；样式；（4 4）可以设置）可以设置INPUTINPUT输入框禁用、最大长度和获取焦点；输入框禁用、最大长度和获取焦点；（5 5）INPUTINPUT输入框有输入框有3 3个常用的事件：输入时（个常用的事件：输入时（BINDINPUTBINDINPUT）、光标聚焦）、光标聚焦时（时（BINDFOCUSBINDFOCUS）、光标离开）、光标离开时（时（BINDBLURBINDBLUR）。）。TEXTAREATEXTAREA多行输入框是与多行输入框是与INPUTINPUT单行输入框对应的一个组件，它单行输入框对应的一个组件，它可以输入多行文本内容，它

36、的属性如可以输入多行文本内容，它的属性如表表3.133.13所示。所示。3.3.53.3.5TEXTAREATEXTAREA多行输入框多行输入框表表3.13多行输入框属性多行输入框属性续表续表 从从表表3.133.13多行输入框属性里可以看出多行输入框属性里可以看出：（1 1）通过）通过PLACEHOLDERPLACEHOLDER来给输入框添加类似于来给输入框添加类似于“请输入手机号请输入手机号/用用户名户名/邮箱邮箱”这样友好的提示信息这样友好的提示信息，PLACEHOLDER-STYLEPLACEHOLDER-STYLE设置提示设置提示信息的样式，信息的样式，PLACEHOLDER-CLA

37、SSPLACEHOLDER-CLASS设置提示信息的类，然后再针对设置提示信息的类，然后再针对这个类这个类添加样式添加样式；（2 2）可以设置）可以设置TEXTAREATEXTAREA输入框禁用和最大长度、获取焦点、自动输入框禁用和最大长度、获取焦点、自动调整行高；调整行高；（3 3）INPUTINPUT输入框有输入框有4 4个常用的事件：输入时（个常用的事件：输入时（BINDINPUTBINDINPUT）、光）、光标聚焦时（标聚焦时（BINDFOCUSBINDFOCUS）、光标离开）、光标离开时（时（BINDBLURBINDBLUR）、行数）、行数变化时变化时（BINDLINECHANGEB

38、INDLINECHANGE）。）。LABELLABEL组件是用来改进表单可用性的，目前可以用来改进的组件组件是用来改进表单可用性的，目前可以用来改进的组件有：有：、。它它只有一个属性只有一个属性FORFOR，属性，属性FORFOR用来绑定控件的用来绑定控件的IDID。它它有两种使用方式：一种是没有有两种使用方式：一种是没有定义定义FORFOR属性，另一种是定义属性，另一种是定义FORFOR属性。属性。3.3.63.3.6LABELLABEL改进表单可用性改进表单可用性1 1LABELLABEL组件没有定义组件没有定义FORFOR属性属性 LABELLABEL组件没有定义组件没有定义FORFOR

39、属性时，在属性时，在LABELLABEL内包含内包含、这些组件，当单击这些组件，当单击LABELLABEL组组件时，会触发件时，会触发LABELLABEL内包含的第一个控件，假如内包含的第一个控件，假如在第一在第一个位置，就会触发个位置，就会触发对应的事件，假如对应的事件，假如在第一在第一个位置，就会触发个位置，就会触发RADIORADIO对应的事件。对应的事件。下面下面演示一下它的使用。演示一下它的使用。（1 1）在）在WXMLWXML文件里利用文件里利用LABELLABEL组件布局，把第一个组件隐藏组件布局，把第一个组件隐藏起来起来。（2 2）在）在JSJS文件里添加文件里添加CLICKB

40、TNCLICKBTN、CHECKBOXCHANGECHECKBOXCHANGE、RADIOCHANGE3RADIOCHANGE3个个事件函数，分别打印不同的事件函数，分别打印不同的信息。信息。（3 3）在）在WXMLWXML界面里可以看到界面里可以看到按钮组件是隐藏起来的，但是按钮组件是隐藏起来的，但是单击单击“我是我是LABELLABEL组件内的组件内的内容内容”，可以看到打印信息是按钮事件函，可以看到打印信息是按钮事件函数打印的信息，如图数打印的信息，如图3.183.18所示。所示。图图3.18没有定义没有定义for属性属性2 2LABELLABEL组件定义组件定义FORFOR属性属性 L

41、ABELLABEL组件定义组件定义FORFOR属性后，它会根据属性后，它会根据FORFOR属性的值找到与组件属性的值找到与组件IDID一样的值，然后触发这个组件的相应事件一样的值，然后触发这个组件的相应事件。下面下面演示一下它的使用：演示一下它的使用：（1 1）在）在WXMLWXML文件里利用文件里利用LABELLABEL组件布局，把第一个组件隐藏起来，给组件布局，把第一个组件隐藏起来，给LABELLABEL定义定义FORFOR等于等于MANMAN，让它，让它找到找到IDID值等于值等于MANMAN组件，然后触发该组件组件，然后触发该组件的的事件。事件。（2 2）在）在JSJS文件里添加文件里

42、添加CLICKBTNCLICKBTN、CHECKBOXCHANGECHECKBOXCHANGE、RADIOCHANGE3RADIOCHANGE3个个事件函数，分别打印不同的事件函数，分别打印不同的信息。信息。（3 3）在）在WXMLWXML界面里可以看到界面里可以看到按钮组件是隐藏起来的，但是按钮组件是隐藏起来的，但是单击单击“我是我是LABELLABEL组件内的内容组件内的内容”，可以可以看到看到IDID值等于值等于MANMAN的单项选择的单项选择器程序为选中状态，同时触发事件，打印信息，如图器程序为选中状态，同时触发事件，打印信息，如图3.193.19所示。所示。从从这里可以看出，如果这里

43、可以看出，如果LABELLABEL定义定义FORFOR属性，就会根据属性，就会根据FORFOR属性的属性的值找到组件值找到组件IDID等于等于FORFOR属性值，然后触发属性值，然后触发相应相应事件；如果事件；如果LABELLABEL没有定没有定义义FORFOR属性，它会找到属性，它会找到LABELLABEL组件内的第一个组件，然后触发相应事件。组件内的第一个组件，然后触发相应事件。图图3.19定义定义for属性属性 PICKERPICKER滚动选择器，支持滚动选择器，支持3 3种滚动选择器：普通选择器、时间选种滚动选择器：普通选择器、时间选择器、日期选择器择器、日期选择器。默认默认的是普通的

44、是普通选择器选择器，如图，如图3.203.20、图、图3.213.21和图和图3.223.22所示。所示。3.3.73.3.7PICKERPICKER滚动选择器滚动选择器图图3.20普通选择器普通选择器图图3.21时间选择器时间选择器图图3.22日期选择器日期选择器 这这3 3种选择器是通过种选择器是通过MODEMODE来区分的，普通选择器来区分的，普通选择器MODE=SELECTORMODE=SELECTOR，时间选择器时间选择器MODE=TIMEMODE=TIME，日期，日期选择器选择器MODE=DATEMODE=DATE，每种类型选择器的属，每种类型选择器的属性不同，如表性不同，如表3.

45、143.14、表、表3.153.15、表、表3.163.16所示。所示。1 1普通选择器：普通选择器：MODE=SELECTORMODE=SELECTOR表表3.14普通选择器属性普通选择器属性 界面效果如图界面效果如图3.233.23所示。所示。图图3.23普通选择器普通选择器2 2时间选择器：时间选择器：MODE=TIMEMODE=TIME表表3.15时间选择器属性时间选择器属性 界面界面效果如图效果如图3.243.24所示。所示。图图3.24时间选择器时间选择器3 3日期选择器：日期选择器：MODE=DATEMODE=DATE表表3.16日期选择器属性日期选择器属性 界面界面效果如图效果

46、如图3.253.25所示。所示。图图3.25日期选择器日期选择器4 4PICKER-VIEWPICKER-VIEW嵌入页面滚动选择器嵌入页面滚动选择器 除了除了普通选择器、时间选择器、日期选普通选择器、时间选择器、日期选择器择器3 3种滚动选择器之外，还有一种嵌入页种滚动选择器之外，还有一种嵌入页面的滚动选择器，面的滚动选择器，它使用它使用PICKER-VIEWPICKER-VIEW组件组件在页面里的布局，如图在页面里的布局，如图3.263.26所示。所示。图图3.26嵌入页面滚动选择器嵌入页面滚动选择器 PICKER-VIEW PICKER-VIEW嵌入页面滚动选择器组件里面只能显示嵌入页面

47、滚动选择器组件里面只能显示PICKER-VIEW-COLUMN/组件，不会显示其他组件，不会显示其他节点节点，PICKER-VIEWPICKER-VIEW有有3 3个属性，个属性，如表如表3.173.17所示。所示。表表3.17嵌入页面滚动选择器属性嵌入页面滚动选择器属性 SLIDERSLIDER滑动选择器组件，经常用于滑动选择器组件，经常用于控制声音的大小、屏幕的亮度等场景，控制声音的大小、屏幕的亮度等场景，它可以设置滑动步长、显示它可以设置滑动步长、显示当前当前值以及值以及设置最小值、最大值，如图设置最小值、最大值，如图3.273.27所示。所示。3.3.83.3.8SLIDERSLIDE

48、R滑动选择器滑动选择器图图3.27滑动选择器滑动选择器 SLIDER SLIDER滑动选择器组件的属性如表滑动选择器组件的属性如表3.183.18所示。所示。表表3.18slider滑动选择器属性滑动选择器属性 界面界面效果如图效果如图3.283.28所示。所示。图图3.28滑动选择器使用滑动选择器使用 SWITCHSWITCH开关选择器应用得十分普遍，开关选择器应用得十分普遍，它有两个状态：开和关。在很多场景都它有两个状态：开和关。在很多场景都会用到开关这个功能，会用到开关这个功能，比如微比如微信设置里信设置里的新消息提醒界面，它通过开关来设置的新消息提醒界面，它通过开关来设置是否接收消息、

49、是否显示消息、是否有是否接收消息、是否显示消息、是否有声音、是否振动声音、是否振动等功能等功能，如图，如图3.293.29所示。所示。3.3.93.3.9SWITCHSWITCH开关选择器开关选择器图图3.29微信新消息提醒设置微信新消息提醒设置 SWITCH SWITCH开关选择器的属性可以设置为是否选中、开关类型、绑定开关选择器的属性可以设置为是否选中、开关类型、绑定事件和颜色，如表事件和颜色，如表3.193.19所示。所示。表表3.19switch开关选择器属性开关选择器属性 界面界面效果如图效果如图3.303.30所示。所示。图图3.30开关选择器应用开关选择器应用 FORMFORM表

50、单组件将表单里组件的值提交给表单组件将表单里组件的值提交给JSJS文件进行处理，可以文件进行处理，可以提交提交、CHECKBOX/、这些组件的值这些组件的值。提交提交表单的时候，会借助于表单的时候，会借助于BUTTONBUTTON组件的组件的FORMTYPEFORMTYPE为为SUBMITSUBMIT的属的属性，将表单组件中性，将表单组件中的的VALUEVALUE值值进行提交，需要在表单组件中进行提交，需要在表单组件中加上加上NAMENAME来作为来作为KEYKEY。FORM FORM表单组件的属性如表表单组件的属性如表3.203.20所示。所示。3.3.103.3.10FORMFORM表单表