微信小程序开发图解案例第3章

3.1.3 swiper滑块视图容器
2.页签切换效果
swiper 滑块视图容器除了可以 用来进行海报轮播效果的实现外， 还可以进行页签切换效果的实现， 常用于多种方式的登录或者多种类
别的切换，如图所示。
目录
contents
3.1 视图容器组件 3.2 基础内容组件 2.3 丰富的表单组件 3.4 导航组件 3.5 媒体组件 3.6 地图组件 3.7 画布组件
3.3.6 label改进表单可用性
bel组件定义for属性
label组件定义for属性后，它会根据for属性的值找到组件id一样的值，然后会触发这个组件 的相应事件。
3.3.7 picker滚动选择器
picker滚动选择器，支持三种滚动选择器：普通选择器，时间选择器，日期选择器，默认是 普通选择器，如图所示。
text文本组件支持转义符“\”，如换行\n、空格\t，<text/> 组件内只支持 <text/> 嵌套， 除了文本节点，其他节点都无法长按选中。
3.2.3 progress进度条
Progress进度条组件是一种提高用户体 验度的组件，就像视频播放一样，可以通过 进度条看到完整视频的长度、当前播放的进 度，这样让用户能合理的安排自己的时间， 提高用户的体验度，微信小程序也提供了 progress进度条组件，它的属性如表所示。
和警告类型按钮，同时提供两种大小
形状的按钮：默认和mini按钮，如图 所示。
3.3.1 button按钮
button按钮组件有很多属性，每个属性有不同的作用，如表所示。
3.3.2 checkbox多项选择器
checkbox多项选择器组件，也就是我们常说的复选框，用来进行多项选择的时候会用 到checkbox多项选择器。它的属性如表所示。
label 组 件 没 有 定 义 for 属 性 时 ， 在 label 内 包 含 <button/> 、 <checkbox/> 、 <radio/> 、 <switch/>这些组件，当单击label组件时，会触发label内包含的第一个控件，假如<button/>在第 一个位置，就会触发<button/>对应的事件，假如<radio/>在第一位，就会触发radio对应的事件。
switch开关选择器应用得十分普遍，
它有两个状态：开或者关，在很多场景都 会用到开关这个功能，如微信设置里的 “新消息提醒”界面，通过开关来设置是 否接收消息、显示消息、是否有声音、是 否震动等功能，如图所示。
3.3.9 switch开关选择器
scroll-view 来实现这些新闻频道的横
向滚动，如图所示。
3.1.3 sபைடு நூலகம்iper滑块视图容器
swiper滑块视图容器用来在指定区域内切换内容的显示，常用于制作海报轮播效果和页签 内容的切换效果。它的属性如表所示。
3.1.3 swiper滑块视图容器
1．海报轮播效果
海报轮播效果常用来展示商品图片信息或者广告信息，是很多网站或者App软件都会采 用的一种布局方式，如图所示。
3.3.4 input单行输入框
input单行输入框用来输 入单行文本内容，其属性如 表所示。
3.3.5 textarea多行输入框
textarea多行输入框是与 input单行输入框对应的一个 组件，它可以输入多行文本 内容。它的属性如表所示。
3.3.6 label改进表单可用性
bel组件没有定义for属性
目录
contents
3.1 视图容器组件 3.2 基础内容组件 2.3 丰富的表单组件 3.4 导航组件 3.5 媒体组件 3.6 地图组件 3.7 画布组件
3.8 沙场大练兵：表单登录注册微信小程序
3.3.1 button按钮
button按钮组件提供3种类型的 按钮：基本类型按钮、默认类型按钮
目录
contents
3.1 视图容器组件 3.2 基础内容组件 2.3 丰富的表单组件 3.4 导航组件 3.5 媒体组件 3.6 地图组件 3.7 画布组件
3.8 沙场大练兵：表单登录注册微信小程序
3.1.1 view视图容器
view视图容器是WXML界面布局的基础组件，它和HTML里的div功能类似，用来进行界面
3.1.2 scroll-view可滚动视图区域
1．纵向滚动
允许内容纵向滚动，需要给 <scroll-view/> 一个固定高度，可以绑 定 滚 动 到 顶 部 / 左 边 （ bindscrolltoupper ）、滚动到底部 /
右 边 （ bindscrolltolower ） 、 滚 动 时
的布局。view视图容器也有自己的属性，如表所示。
3.1.1 view视图容器
在WXML界面里使用view布局，
渲染出界面内容，如图所示。
3.1.2 scroll-view可滚动视图区域
scroll-view可滚动视图区域允许视图区域内容横向滚动或者纵向滚动，类似于浏览器横向 滚动条和垂直滚动条的使用。scroll-view拥有自己的属性和事件，如表所示。
3.8 沙场大练兵：表单登录注册微信小程序
3.2.1 icon图标组件
微信小程序提供了丰富的图标组件， 应用于不同的场景，有成功、警告、提示、 取消、下载等不同含义的图标，如图所示。 icon图标组件有3个属性：图标的类 型type、图标的大小size和图标的颜色 color，如表所示。
3.2.2 text文本组件
3.3.8 slider滑动选择器
slider滑动选择器组件，经常用来
控制声音的大小、屏幕的亮度等场景
的使用，它可以设置滑动步长、显示 当前值以及设置最小值/最大值，如右 图所示。
3.3.8 slider滑动选择器
slider滑动选择器组件它的属性如下表所示。
3.3.9 switch开关选择器
（bindscroll）触发的事件，也可以滚 动到指定的id区域（scroll-into-view）。 下面实现纵向滚动，如图所示。
3.1.2 scroll-view可滚动视图区域
2．横向滚动
在使用今日头条或腾讯新闻时， 在新闻列表的上方都会有新闻频道供 我们单击，可以向左滑动和向右滑动 来查看相应类别的新闻，可以采用