• Welcome to Journal web site.

我是 PHP 程序员

- 开发无止境 -

Next
Prev

百度小程序-组件

Data: 2020-10-08 10:33:53Form: JournalClick: 9

# 组件

  • 组件写在 swan 文件中

# 一、视图容器

# 1、view 视图容器

  • 可以把view 当成html里的div标签
属性类型必填描述
hover-classstring指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagationboolean指定是否阻止本节点的祖先节点出现点击态
hover-start-timenumber按住后多久出现点击态,单位毫秒
hover-stay-timenumber手指松开后点击态保留时间,单位毫秒

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示例:

.a{
    color:red;
}

# 二、基础内容

# 1、 icon 图标

属性类型必填描述
typebooleanicon的类型,有效值:success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect, loadingGrey
sizebooleanicon的大小
colornumbericon的颜色,同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单选框未选中图标
loadingGreyloading图标

# 2、 progress 进度条

属性类型必填描述
percentnumber百分比0~100
show-infoboolean在进度条右侧显示百分比
stroke-widthnumber/string进度条线的宽度
colorstring进度条颜色(请使用activeColor)
activeColorstring已选择的进度条的颜色
backgroundColorstring未选择的进度条的颜色
activeboolean进度条从左往右的动画
active-modestringbackwards: 动画从头播;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 文本

属性类型默认值必填描述
spacestring显示连续空格
decodebooleanfalse是否解码

space 的合法值

属性描述
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小
<text>欧阳克,是金庸武侠小说《射雕英雄传》里的人物,面目俊雅,英气逼人。生性好色,拥有众多姬妾,受完颜洪烈聘请来盗取《武穆遗书》,曾受到江南七怪、洪七公等正派的攻击。后来在荒岛因要杀害洪七公而被黄蓉使计引开用大岩石压断双腿 ,后因在牛家村曲家酒馆调戏穆念慈,被杨康发现愤怒之下用铁枪头所杀。</text>
<text space="nbsp" decode="true">欧阳克,是金庸武侠小说《射雕英雄传》里的人物,       面目俊雅,英气逼人。生性好色,拥有众多姬妾,受完颜洪烈聘请来盗取《武穆遗书》,     曾受到江南七怪、洪七公等正派的攻击。后来在荒岛因要杀害洪七公而被黄蓉使计引开用大岩石压断双腿 ,后因在牛家村曲家酒馆调戏穆念慈,被杨康发现愤怒之下用铁枪头所杀。</text>

# 三、表单组件

# 1、button 按钮

属性类型必填描述
sizestring按钮的大小
typestring按钮的样式类型
plainboolean按钮是否镂空,背景色透明
disabledboolean是否禁用
loadingboolean名称前是否带 loading 图标

size 的合法值

属性描述
default默认大小
mini小尺寸

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 多选框

属性类型必填描述
valuestring选择框的值
disabledboolean是否禁用
checkedboolean当前是否选中,可用来设置默认选中
colorstringcheckbox的颜色,同css的color
<checkbox-group>
    <checkbox value="1" checked />欧阳克
    <checkbox value="2" color="red" />黄蓉
    <checkbox value="3" disabled />郭靖
</checkbox-group>

# 4、input 输入框

属性类型必填描述
valuestring输入框的初始内容
typestringinput 的类型
passwordboolean是否是密码类型
placeholderstring输入框为空时占位符
placeholder-stylestring指定 placeholder 的样式
placeholder-classstring指定 placeholder 的样式类
disabledstring是否禁用
maxlengthnumber最大输入长度,设置为 -1 的时候不限制最大长度
confirm-typestring设置键盘右下角按钮的文字,仅在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 从底部弹起的滚动选择器

属性类型必填描述
modestring选择器类型
disabledboolean是否禁用

mode 的合法值

属性描述
selector普通选择器
multiSelector多列选择器
time时间选择器
date日期选择器
region省市区选择器

# selector 普通选择器

属性类型描述
rangestringmode 为 selector 或 multiSelector 时,range 有效
range-keyboolean选择器显示内容
valueboolean表示选择了 range 中的第几个(下标从 0 开始)
<picker value="1" range="{{['欧阳克','黄蓉','郭靖']}}">
    <view>请选择:</view>
</picker>

# multiSelector 多列选择器

<picker mode="multiSelector" value="1" range="{{[['欧阳克','黄蓉','郭靖'],['帅','美','傻'],['一级武功','二级武功','残废']]}}">
    <view>请选择:</view>
</picker>

# time 时间选择器

属性类型描述
valuestring表示选中的时间,格式为"hh:mm"
startstring表示有效时间范围的开始,字符串格式为"hh:mm"
endstring表示有效时间范围的结束,字符串格式为"hh:mm"
<picker mode="time" value="10" start="10:00" end="15:00">
    <view>请选择:</view>
</picker>

# date 日期选择器

属性类型描述
valuestring表示选中的日期,格式为"YYYY-MM-DD"
startstring表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"
endstring表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"
fieldsstring有效值 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 省市区选择器

属性类型描述
valuearray表示选中的省市区,默认选中每一列的第一个值
<picker mode="region" value="{{['广东省', '广州市', '海珠区']}}">
    <view>请选择:</view>
</picker>

# 6、picker-view 嵌入页面的滚动选择器

属性类型必填描述
valueArray选择器类型
indicator-stylestring设置选择器中间选中框的样式
indicator-classstring设置选择器中间选中框的类名
<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 单项选择器

属性类型必填描述
valuestring选择器的值
checkedboolean当前是否选中
disabledboolean是否禁用
colorstringradio的颜色,同css的color
<radio-group>
    <radio value="1" checked="true" />欧阳克
    <radio value="2" color="red" />黄蓉
    <radio value="3" />郭靖
    <radio value="4" />杨康
</radio-group>
Name:
<提交>