# 百度小程序--组件
* 组件写在 `swan` 文件中
---
### 组件导读
<table>
<tr>
<td>分组</td>
<td>组件名</td>
<td>描述</td>
</tr>
<tr>
<td>视图容器</td>
<td>view</td>
<td>视图容器</td>
</tr>
<tr>
<td rowspan="3">基础容器</td>
<td>icon</td>
<td>图标</td>
</tr>
<tr>
<td>progress</td>
<td>进度条</td>
</tr>
<tr>
<td>text</td>
<td>文本</td>
</tr>
<tr>
<td rowspan="11">表单组件</td>
<td>button</td>
<td>按钮</td>
</tr>
<tr>
<td>checkbox-group</td>
<td>多选框组</td>
</tr>
<tr>
<td>checkbox</td>
<td>多选框</td>
</tr>
<tr>
<td>input</td>
<td>输入框</td>
</tr>
<tr>
<td>picker</td>
<td>从底部弹起的滚动选择器</td>
</tr>
<tr>
<td>picker-view</td>
<td>嵌入页面的滚动选择器</td>
</tr>
<tr>
<td>radio-group</td>
<td>单项选择器</td>
</tr>
<tr>
<td>radio</td>
<td>单选选择</td>
</tr>
<tr>
<td>slider</td>
<td>滑动选择器</td>
</tr>
<tr>
<td>switch</td>
<td>开关选择器</td>
</tr>
<tr>
<td>textarea</td>
<td>多行输入框</td>
</tr>
<tr>
<td rowspan="2">媒体组件</td>
<td>image</td>
<td>图片</td>
</tr>
<tr>
<td>audio</td>
<td>音频</td>
</tr>
<tr>
<td>导航</td>
<td>navigator</td>
<td>页面链接</td>
</tr>
</table>
---
### 一、视图容器
#### 1、`view` 视图容器
* 可以把view 当成html里的div标签
**属性**|**类型**|**必填**|**描述**
---|---|---|---
hover-class|string|否|指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation|boolean|否|指定是否阻止本节点的祖先节点出现点击态
hover-start-time|number|否|按住后多久出现点击态，单位毫秒
hover-stay-time|number|否|手指松开后点击态保留时间，单位毫秒
> swan示例：
```html
<view hover-class="a">我是欧阳克</view>
<view hover-class="a">我是欧阳锋
<view hover-class="a" hover-stop-propagation>我是欧阳克</view>
</view>
<view hover-class="a" hover-stop-propagation hover-start-time="1000" hover-stay-time="5000">我是欧阳克</view>
```
> css示例：
```php
.a{
color:red;
}
```
---
### 二、基础内容
#### 1、 `icon` 图标
**属性**|**类型**|**必填**|**描述**
---|---|---|---
type|boolean|是|icon的类型，有效值：success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect, loadingGrey
size|boolean|否|icon的大小
color|number|否|icon的颜色，同css的color
```html
<icon type="success" />
<icon type="success_no_circle" />
<icon type="info" />
<icon type="warn" />
<icon type="waiting" />
<icon type="cancel" />
<icon type="download" />
<icon type="search" />
<icon type="clear" />
<icon type="success" size="100rpx"/>
<icon type="success" color="orange"/>
```
> type 的合法值
**属性**|**描述**
---|---
success|成功图标
info|消息图标
warn|警告图标
waiting|等待图标
success_no_circle|无圆形边框成功图标
clear|删除图标
search|搜索图标
personal|人物图标
setting|设置图标
top|回到顶部图标
close|关闭图标
cancel|取消图标
download|下载图标
checkboxSelected|复选框选中图标
radioSelected|单选框选中图标
radioUnselect|单选框未选中图标
loadingGrey|loading图标
#### 2、 `progress` 进度条
**属性**|**类型**|**必填**|**描述**
---|---|---|---
percent|number|否|百分比0~100
show-info|boolean|否|在进度条右侧显示百分比
stroke-width|number/string|否|进度条线的宽度
color|string|否|进度条颜色（请使用activeColor）
activeColor|string|否|已选择的进度条的颜色
backgroundColor|string|否|未选择的进度条的颜色
active|boolean|否|进度条从左往右的动画
active-mode|string|否|backwards: 动画从头播；forwards：动画从上次结束点接着播
```html
<progress percent="5" />
<progress percent="10" show-info />
<progress percent="25" show-info stroke-width="20" />
<progress percent="30" color="red" />
<progress percent="35" activeColor="pink" />
<progress percent="40" activeColor="pink" backgroundColor="green" />
<progress percent="45" activeColor="pink" backgroundColor="green" />
<progress percent="50" active />
<progress percent="55" active active-mode="backwards" />
```
#### 3、`text` 文本
**属性**|**类型**|**默认值**|**必填**|**描述**
---|---|---|---|---
space|string||否|显示连续空格
decode|boolean|false|否|是否解码
> space 的合法值
**属性**|**描述**
---|---
ensp|中文字符空格一半大小
emsp|中文字符空格大小
nbsp|根据字体设置的空格大小
```html
<text>欧阳克，是金庸武侠小说《射雕英雄传》里的人物，面目俊雅，英气逼人。生性好色，拥有众多姬妾，受完颜洪烈聘请来盗取《武穆遗书》，曾受到江南七怪、洪七公等正派的攻击。后来在荒岛因要杀害洪七公而被黄蓉使计引开用大岩石压断双腿 ，后因在牛家村曲家酒馆调戏穆念慈，被杨康发现愤怒之下用铁枪头所杀。</text>
<text space="nbsp" decode="true">欧阳克，是金庸武侠小说《射雕英雄传》里的人物， 面目俊雅，英气逼人。生性好色，拥有众多姬妾，受完颜洪烈聘请来盗取《武穆遗书》， 曾受到江南七怪、洪七公等正派的攻击。后来在荒岛因要杀害洪七公而被黄蓉使计引开用大岩石压断双腿 ，后因在牛家村曲家酒馆调戏穆念慈，被杨康发现愤怒之下用铁枪头所杀。</text>
```
---
### 三、表单组件
#### 1、`button` 按钮
**属性**|**类型**|**必填**|**描述**
---|---|---|---
size|string|否|按钮的大小
type|string|否|按钮的样式类型
plain|boolean|否|按钮是否镂空，背景色透明
disabled|boolean|否|是否禁用
loading|boolean|否|名称前是否带 loading 图标
> size 的合法值
**属性**|**描述**
---|---
default|默认大小
mini|小尺寸
> type 的合法值
**属性**|**描述**
---|---
default|白色
primary|绿色
warn|红色
```html
<button size="default">默认尺寸</button>
<button size="mini">小尺寸</button>
<button type="default">默认白色</button>
<button type="warn">红色</button>
<button type="primary">绿色</button>
<button type="primary" plain="true">镂空按钮</button>
<button type="primary" disabled="true">禁用按钮</button>
<button type="primary" loading="true">带等待图标</button>
```
#### 2、`checkbox-group` 多选框组
> 多项选择器，内部由多个checkbox组成，示例和checkbox写在一起
#### 3、`checkbox` 多选框
**属性**|**类型**|**必填**|**描述**
---|---|---|---
value|string|否|选择框的值
disabled|boolean|否|是否禁用
checked|boolean|否|当前是否选中，可用来设置默认选中
color|string|否|checkbox的颜色，同css的color
```html
<checkbox-group>
<checkbox value="1" checked />欧阳克
<checkbox value="2" color="red" />黄蓉
<checkbox value="3" disabled />郭靖
</checkbox-group>
```
#### 4、`input` 输入框
**属性**|**类型**|**必填**|**描述**
---|---|---|---
value|string|是|输入框的初始内容
type|string|否|input 的类型
password|boolean|否|是否是密码类型
placeholder|string|是|输入框为空时占位符
placeholder-style|string|是|指定 placeholder 的样式
placeholder-class|string|否|指定 placeholder 的样式类
disabled|string|否|是否禁用
maxlength|number|否|最大输入长度，设置为 -1 的时候不限制最大长度
confirm-type|string|否|设置键盘右下角按钮的文字，仅在type='text'时生效
> type 的合法值
**属性**|**描述**
---|---
text|文本输入键盘
number|数字输入键盘
idcard|身份证输入键盘
digit|带小数点的数字键盘
> confirm-type 的合法值
**属性**|**描述**
---|---
send|右下角按钮为“发送”
search|右下角按钮为“搜索”
next|右下角按钮为“下一个”
go|右下角按钮为“前往”
done|右下角按钮为“完成”
```html
// 在手机上，输入框只能弹出对应的输入法
<input value="这是一个输入框"/>
<input value="这是一个数字输入框" type="number"/>
<input value="这是一个身份证输入框" type="idcard"/>
<input value="这是一个带小数的数字输入框" type="digit"/>
<input value="这是一个带小数的数字输入框" password="true"/>
<input placeholder="这是一个带提示的输入框" placeholder-style="color:red"/>
<input value="这是一个禁用的输入框" disabled/>
<input value="这是一个只能输入10个字的输入框" maxlength="10"/>
<input value="这是一个搜索输入框" confirm-type="search"/>
```
#### 5、`picker` 从底部弹起的滚动选择器
**属性**|**类型**|**必填**|**描述**
---|---|---|---
mode|string|否|选择器类型
disabled|boolean|否|是否禁用
> mode 的合法值
**属性**|**描述**
---|---
selector|普通选择器
multiSelector|多列选择器
time|时间选择器
date|日期选择器
region|省市区选择器
##### selector 普通选择器
**属性**|**类型**|**描述**
---|---|---
range|string|mode 为 selector 或 multiSelector 时，range 有效
range-key|boolean|选择器显示内容
value|boolean|表示选择了 range 中的第几个（下标从 0 开始）
```html
<picker value="1" range="{{['欧阳克','黄蓉','郭靖']}}">
<view>请选择：</view>
</picker>
```
##### multiSelector 多列选择器
```html
<picker mode="multiSelector" value="1" range="{{[['欧阳克','黄蓉','郭靖'],['帅','美','傻'],['一级武功','二级武功','残废']]}}">
<view>请选择：</view>
</picker>
```
##### time 时间选择器
**属性**|**类型**|**描述**
---|---|---
value|string|表示选中的时间，格式为"hh:mm"
start|string|表示有效时间范围的开始，字符串格式为"hh:mm"
end|string|表示有效时间范围的结束，字符串格式为"hh:mm"
```html
<picker mode="time" value="10" start="10:00" end="15:00">
<view>请选择：</view>
</picker>
```
#### date 日期选择器
**属性**|**类型**|**描述**
---|---|---
value|string|表示选中的日期，格式为"YYYY-MM-DD"
start|string|表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end|string|表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields|string|有效值 year,month,day 表示选择器的粒度
> fields 有效值
**值**|**描述**
---|---
year|选择器粒度为年
month|选择器粒度为月份
day|选择器粒度为天
```html
<picker mode="date" value="10" start="2018-10-10" end="2019-10-10" fields="day">
<view>请选择：</view>
</picker>
```
##### region 省市区选择器
**属性**|**类型**|**描述**
---|---|---
value|array|表示选中的省市区，默认选中每一列的第一个值
```html
<picker mode="region" value="{{['广东省', '广州市', '海珠区']}}">
<view>请选择：</view>
</picker>
```
#### 6、`picker-view` 嵌入页面的滚动选择器
**属性**|**类型**|**必填**|**描述**
---|---|---|---
value|Array|否|选择器类型
indicator-style|string|否|设置选择器中间选中框的样式
indicator-class|string|否|设置选择器中间选中框的类名
```html
<picker-view value="{{[1,1,1]}}" indicator-style="height: 50px;" style="width: 100%; height: 300px;">
<picker-view-column>
<view style="line-height: 50px">欧阳克</view>
<view style="line-height: 50px">黄蓉</view>
<view style="line-height: 50px">郭靖</view>
<view style="line-height: 50px">杨康</view>
</picker-view-column>
<picker-view-column>
<view style="line-height: 50px">帅</view>
<view style="line-height: 50px">美</view>
<view style="line-height: 50px">傻</view>
<view style="line-height: 50px">丑</view>
</picker-view-column>
<picker-view-column>
<view style="line-height: 50px">1</view>
<view style="line-height: 50px">2</view>
<view style="line-height: 50px">3</view>
<view style="line-height: 50px">4</view>
</picker-view-column>
</picker-view>
```
#### 7、`radio-group` 单项选择器组
> 单项选择器组，内部由多个radio组成。示例和radio写在一起
#### 8、`radio` 单项选择器
**属性**|**类型**|**必填**|**描述**
---|---|---|---
value|string|否|选择器的值
checked|boolean|否|当前是否选中
disabled|boolean|否|是否禁用
color|string|否|radio的颜色，同css的color
```html
<radio-group>
<radio value="1" checked="true" />欧阳克
<radio value="2" color="red" />黄蓉
<radio value="3" />郭靖
<radio value="4" />杨康
</radio-group>
```
#### 9、`slider` 滑动选择器
**属性**|**类型**|**必填**|**描述**
---|---|---|---
min|number|否|最小值
max|number|否|最大值
step|number|否|步长，取值必须大于 0，并且可被(max - min)整除
disabled|boolean|否|是否禁用
value|number|否|当前取值
activeColor|color|否|已选择的颜色
backgroundColor|color|否|背景条的颜色
block-size|number|否|滑块的大小，取值范围为 12 - 28
block-color|color|否|滑块的颜色
show-value|boolean|否|是否显示当前 value
```html
<slider min="10" max="30" show-value="true" />
<slider step="10" show-value="true" />
<slider step="10" disabled="true" show-value="true" />
<slider step="10" value="30" show-value="true" />
<slider step="10" activeColor="red" show-value="true" />
<slider step="10" activeColor="red" backgroundColor="green" show-value="true" />
<slider step="10" block-size="20" show-value="true" />
<slider step="10" block-size="12" block-color="blue" show-value="true" />
<slider step="10" block-size="14" show-value="true" />
```
#### 10、`switch` 开关选择器
**属性**|**类型**|**必填**|**描述**
---|---|---|---
checked|boolean|否|是否选中
disabled|boolean|否|是否禁用
type|string|否|样式，有效值：switch, checkbox
color|string|否|switch 的颜色，同 css 的 color
```html
<switch checked />欧阳克
<switch disabled />黄蓉
<switch type="checkbox" />郭靖
<switch color="red" />杨康
```
#### 11、`textarea` 多行输入框
**属性**|**类型**|**必填**|**描述**
---|---|---|---
value|string|否|输入框的内容
placeholder|string|否|输入框为空时占位符
placeholder-style|string|否|指定 placeholder 的样式，目前仅支持color,font-size和font-weight
placeholder-class|string|否|指定 placeholder 的样式类
disabled|boolean|否|是否禁用
maxlength|number|否|最大输入长度，设置为 -1 的时候不限制最大长度
auto-height|boolean|否|是否自动增高，设置auto-height时，style.height不生效
```html
<textarea value="这是一个输入框" />
<textarea placeholder="红色字体" placeholder-style="color:red" />
<textarea disabled placeholder="禁用的输入框" />
<textarea maxlength="3" placeholder="只能输入3个字" />
<textarea auto-height="true" placeholder="自动增高的输入框" />
```
---
### 四、媒体组件
#### 1、`image` 图片
* `image` 组件默认宽度 300px、高度 225px
**属性**|**类型**|**必填**|**描述**
---|---|---|---
src|string|否|图片资源地址
mode|string|否|图片裁剪、缩放的模式
lazy-load|boolean|否|图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
> mode 的合法值
**属性**|**描述**
---|---
scaleToFill|缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit|缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
aspectFill|缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
widthFix|缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
top|裁剪模式，不缩放图片，只显示图片的顶部区域
bottom|裁剪模式，不缩放图片，只显示图片的底部区域
center|裁剪模式，不缩放图片，只显示图片的中间区域
left|裁剪模式，不缩放图片，只显示图片的左边区域
right|裁剪模式，不缩放图片，只显示图片的右边区域
top left|裁剪模式，不缩放图片，只显示图片的左上边区域
top right|裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left|裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right|裁剪模式，不缩放图片，只显示图片的右下边区域
> wxml示例：
```html
<image style="width: 200px; height: 200px;" mode="scaleToFill" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="aspectFit" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="aspectFill" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="widthFix" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="top" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="bottom" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="center" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="left" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="right" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="top left" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="top right" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="bottom left" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="bottom right" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
```
---
### 五、导航
#### 1、`navigator` 页面链接
**属性**|**类型**|**必填**|**描述**
---|---|---|---
url|string|否|当前小程序内的跳转链接
open-type|string|否|跳转方式
delta|number|否|当 open-type 为 'navigateBack' 时有效，表示回退的层数，最多10层
hover-class|string|否|指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation|boolean|否|指定是否阻止本节点的祖先节点出现点击态
hover-start-time|number|否|按住后多久出现点击态，单位毫秒
hover-stay-time|number|否|手指松开后点击态保留时间，单位毫秒
> open-type 合法值
**属性**|**描述**
---|---
navigate|保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
redirect|关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
switchTab|跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch|关闭所有页面，打开到应用内的某个页面
navigateBack|关闭当前页面，返回上一页面或多级页面
```html
<navigator url="2?title=navigate" hover-class="a" hover-stop-propagation="true" hover-start-time="5000" hover-stay-time="5000">跳转到新页面</navigator>
<navigator url="3" open-type="redirect">跳转到新页面</navigator>
<navigator url="1" open-type="switchTab">跳转到新页面</navigator>
<navigator url="4" open-type="reLaunch">跳转到新页面</navigator>
<navigator open-type="navigateBack" navigateBack="10">跳转到新页面</navigator>
```
- 序言
- PHP基础
- 认识PHP
- 环境安装
- PHP语法
- 流程控制
- PHP数组
- PHP函数
- PHP类与对象
- PHP命名空间
- PHP7新特性
- PHP方法库
- PHP交互
- 前后端交互
- 项目常规开发流程
- MySQL数据库
- 会话控制
- Ajax分页技术
- 细说函数
- 类与对象
- 对象进阶
- 类与对象进阶
- OOP面向对象
- 设计模式
- 路由与模板引擎
- 异常类
- PHP爬虫
- PHP抓取函数
- PHP匹配函数
- 正则表达式
- PHP字符串函数
- 抓取实战
- PHP接口
- 了解接口
- PHP插件
- PHPSpreadsheet
- ThinkPHP6
- 安装
- 架构
- 数据库
- 数据库操作
- 视图
- 模版
- 模型
- 杂项
- 命令行
- 交互
- 微信小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- 百度小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- Linux
- 服务器上线流程
- 安装svn
- MySQL
- 认识MySQL
- MySQL函数
- 杂项
- composer依赖管理工具