百度小程序-组件

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

# 组件

组件写在 swan 文件中

# 一、视图容器

# 1、`view` 视图容器

可以把view 当成html里的div标签

属性	类型	必填	描述
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示例：

.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

<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>

# 三、表单组件

# 1、`button` 按钮

属性	类型	必填	描述
size	string	否	按钮的大小
type	string	否	按钮的样式类型
plain	boolean	否	按钮是否镂空，背景色透明
disabled	boolean	否	是否禁用
loading	boolean	否	名称前是否带 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` 多选框

属性	类型	必填	描述
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>

# 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	右下角按钮为“完成”

// 在手机上，输入框只能弹出对应的输入法
<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>

我是 PHP 程序员

百度小程序-组件

# 组件

# 一、视图容器

# 1、view 视图容器

# 二、基础内容

# 1、 icon 图标

# 2、 progress 进度条

# 3、text 文本

# 三、表单组件

# 1、button 按钮

# 2、checkbox-group 多选框组

# 3、checkbox 多选框

# 4、input 输入框

# 5、picker 从底部弹起的滚动选择器

# selector 普通选择器

# multiSelector 多列选择器

# time 时间选择器

# date 日期选择器

# region 省市区选择器

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

# 7、radio-group 单项选择器组

# 8、radio 单项选择器

# 1、`view` 视图容器

# 1、 `icon` 图标

# 2、 `progress` 进度条

# 3、`text` 文本

# 1、`button` 按钮

# 2、`checkbox-group` 多选框组

# 3、`checkbox` 多选框

# 4、`input` 输入框

# 5、`picker` 从底部弹起的滚动选择器

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

# 7、`radio-group` 单项选择器组

# 8、`radio` 单项选择器