# 组件
# 一、视图容器
# 1、view
视图容器
属性 | 类型 | 必填 | 描述 |
---|
hover-class | string | 否 | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
hover-stop-propagation | boolean | 否 | 指定是否阻止本节点的祖先节点出现点击态 |
hover-start-time | number | 否 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | number | 否 | 手指松开后点击态保留时间,单位毫秒 |
swan示例:
<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示例:
# 二、基础内容
# 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 |
<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:动画从上次结束点接着播 |
<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 | 根据字体设置的空格大小 |
<text>欧阳克,是金庸武侠小说《射雕英雄传》里的人物,面目俊雅,英气逼人。生性好色,拥有众多姬妾,受完颜洪烈聘请来盗取《武穆遗书》,曾受到江南七怪、洪七公等正派的攻击。后来在荒岛因要杀害洪七公而被黄蓉使计引开用大岩石压断双腿 ,后因在牛家村曲家酒馆调戏穆念慈,被杨康发现愤怒之下用铁枪头所杀。</text>
<text space="nbsp" decode="true">欧阳克,是金庸武侠小说《射雕英雄传》里的人物, 面目俊雅,英气逼人。生性好色,拥有众多姬妾,受完颜洪烈聘请来盗取《武穆遗书》, 曾受到江南七怪、洪七公等正派的攻击。后来在荒岛因要杀害洪七公而被黄蓉使计引开用大岩石压断双腿 ,后因在牛家村曲家酒馆调戏穆念慈,被杨康发现愤怒之下用铁枪头所杀。</text>
# 三、表单组件
属性 | 类型 | 必填 | 描述 |
---|
size | string | 否 | 按钮的大小 |
type | string | 否 | 按钮的样式类型 |
plain | boolean | 否 | 按钮是否镂空,背景色透明 |
disabled | boolean | 否 | 是否禁用 |
loading | boolean | 否 | 名称前是否带 loading 图标 |
size 的合法值
type 的合法值
属性 | 描述 |
---|
default | 白色 |
primary | 绿色 |
warn | 红色 |
<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 |
<checkbox-group>
<checkbox value="1" checked />欧阳克
<checkbox value="2" color="red" />黄蓉
<checkbox value="3" disabled />郭靖
</checkbox-group>
属性 | 类型 | 必填 | 描述 |
---|
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 | 右下角按钮为“完成” |
// 在手机上,输入框只能弹出对应的输入法
<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 开始) |
<picker value="1" range="{{['欧阳克','黄蓉','郭靖']}}">
<view>请选择:</view>
</picker>
# multiSelector 多列选择器
<picker mode="multiSelector" value="1" range="{{[['欧阳克','黄蓉','郭靖'],['帅','美','傻'],['一级武功','二级武功','残废']]}}">
<view>请选择:</view>
</picker>
# time 时间选择器
属性 | 类型 | 描述 |
---|
value | string | 表示选中的时间,格式为"hh:mm" |
start | string | 表示有效时间范围的开始,字符串格式为"hh:mm" |
end | string | 表示有效时间范围的结束,字符串格式为"hh:mm" |
<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 | 选择器粒度为天 |
<picker mode="date" value="10" start="2018-10-10" end="2019-10-10" fields="day">
<view>请选择:</view>
</picker>
# region 省市区选择器
属性 | 类型 | 描述 |
---|
value | array | 表示选中的省市区,默认选中每一列的第一个值 |
<picker mode="region" value="{{['广东省', '广州市', '海珠区']}}">
<view>请选择:</view>
</picker>
# 6、picker-view
嵌入页面的滚动选择器
属性 | 类型 | 必填 | 描述 |
---|
value | Array | 否 | 选择器类型 |
indicator-style | string | 否 | 设置选择器中间选中框的样式 |
indicator-class | string | 否 | 设置选择器中间选中框的类名 |
<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 |
<radio-group>
<radio value="1" checked="true" />欧阳克
<radio value="2" color="red" />黄蓉
<radio value="3" />郭靖
<radio value="4" />杨康
</radio-group>