百度智能小程序组件 表单组件

由 Carrie 创建, 最后一次修改 2018-07-09

form


button

解释:按钮

属性名 类型 默认值 说明
size String default 大小
type String default 类型
plain Boolean false 按钮是否镂空,背景色透明
form-type String 用于<form/>组件,点击分别会触发<form/>组件的 submit/reset 事件
open-type String 手百开放能力,比如分享、获取用户信息等等
hover-class String button-hover 点击态。指定按钮按下去的样式类。当 hover-class=”none” 时,没有点击态效果。 button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态
hover-start-time Number 20 按住后多久出现点击态,单位毫秒
hover-stay-time Number 70 手指松开后点击态保留时间,单位毫秒
bindgetuserinfo Handler 用户点击该按钮时,会返回获取到的用户信息,从返回参数的 detail 中获取到的值,和 swan.getUserInfo 一样的。和 open-type 搭配使用, 使用时机: open-type=”getUserInfo”
bindgetphonenumber Handler 获取用户手机号回调。和 open-type 搭配使用, 使用时机: open-type=”getphonenumber”

size有效值:

说明
default
mini

type有效值:

说明
primary
default
warn

open-type有效值:

说明
share 触发用户分享,使用前建议先阅读 swan.onShareAppMessage 用法
getUserInfo 获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息
getPhoneNumber 获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息
示例:
/** button.css **/
/** 修改 button 点击态样式**/
.button-hover {
    background-color: green;
}
/** 添加自定义 button 点击态样式类**/
.other-button-hover {
    background-color: blue;
}
<!-- button.swan-->
<button type="default" size="mini" disabled="true" hover-class="other-button-hover">我是 button </button>

checkbox-group

解释:多项选择器

内部由多个 checkbox 组成

属性名 类型 默认值 说明
bindchange EventHandle <checkbox-group/>中选中项发生改变时触发 change 事件,detail = {value:[选中的checkbox的value的数组]}

checkbox

解释:多选项目

属性名 类型 默认值 说明
value String <checkbox/>标识,选中时触发<checkbox-group/>的 change 事件,并携带<checkbox/>的 value
disabled Boolean false 是否禁用
checked Boolean false 当前是否选中,可用来设置默认选中
color Color checkbox 的颜色,同 CSS 的 color
示例:
<!-- checkbox.swan -->
<form bind:submit="formSubmit">
    <checkbox-group bind:change="checkboxChange" name="citylist">
        <view class="checkbox" s-for="item in items">
            <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</checkbox>
        </view>
        <view class="checkbox">
            <checkbox value="red" color="red">我是红色的</checkbox>
        </view>
        <view class="checkbox">
            <checkbox value="disabled" disabled>我不可用</checkbox>
        </view>
    </checkbox-group>
    <button formType="submit">提交</button>
    <button formType="reset">重置</button>
</form>
// checkbox.js
Page({
    data: {
        items: [
            {
                value: 'China',
                text: '中国'
            },
            {
                value: 'US',
                text: '美国'
            },
            {
                value: 'Britain',
                text: '英国',
                checked: true
            }
        ]
    },
    checkboxChange(e) {
        console.log(e.detail);
    },
    formSubmit(e) {
        // todo someThing
    }
});

form>

解释:表单

将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。

当点击<form/>表单中 form-type 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

属性名 类型 说明
bindsubmit EventHandle 携带 form 中的数据触发 submit 事件,event.detail = {value : {‘name’: ‘value’}}
bindreset EventHandle 表单重置时会触发 reset 事件
示例:
<form bindsubmit="formSubmitHandle" bindreset="formReset">
    <view class="btn-area">
    <view class="section-title">input输入框</view>
    <input name="input" placeholder="please input here~~~" />
    </view>
    <view class="btn">
        <button class="form-button" form-type="submit">提交</button>
        <button class="form-button" form-type="reset">重置</button>
    </view>
</form>
Page({
    formSubmitHandle: function(e) {
        console.log('啊哈哈哈哈,form表单submit了:', e.detail.value)
    },
    formReset: function() {
        console.log('哦豁,form表单被reset了')
    }
})

input

解释:输入框

属性名 类型 默认值 说明
value String 输入框的初始内容
type String text input 的类型
password Boolean false 是否是密码类型
placeholder String 输入框为空时占位符
placeholder-style String placeholder 的样式
placeholder-class String input-placeholder placeholder 的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度
cursor-spacing Number 0 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
focus Boolean false 获取焦点
confirm-type String done 设置键盘右下角按钮的文字
confirm-hold Boolean false 点击键盘右下角按钮时是否保持键盘不收起
cursor Number 指定 focus 时的光标位置
bindinput EventHandle 当键盘输入时,触发 input 事件,event.detail = {value, cursor},处理函数可以直接 return 一个字符串,将替换输入框的内容。
bindfocus EventHandle 输入框聚焦时触发,event.detail = {value: value}
bindblur EventHandle 输入框失去焦点时触发,event.detail = {value: value}
bindconfirm EventHandle 点击完成按钮时触发,event.detail = {value: value}

type 有效值:

说明
text 文本输入键盘
number 数字输入键盘
digit 带小数点的数字键盘

confirm-type 有效值:

说明
send 右下角按钮为 “发送”
search 右下角按钮为 “搜索”
next 右下角按钮为 “下一个”
go 右下角按钮为 “前往”
done 右下角按钮为 “完成”
示例:
<!-- input.swan -->
<view class="section">
    <input  maxlength="20" placeholder="最大输入长度20" />
</view>

label

解释:

使用 for 属性找到对应的 id(必须写for),当点击时,就会触发对应的控件。

for 优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有:'<button/><checkbox/><radio/><switch/>

属性名 类型 说明
for String 绑定控件的 id

picker

解释:选择器

从底部弹起的滚动选择器。现支持五种选择器,通过 mode 来区分,分别是时间选择器、日期选择器、普通选择器、多列选择器以及省市区选择器,默认是普通选择器。

时间选择器:mode = time
属性名 类型 默认值 说明
value String 表示选中的时间,格式为 “hh:mm”
start String 表示有效时间范围的开始,字符串格式为 “hh:mm”
end String 表示有效时间范围的结束,字符串格式为 “hh:mm”
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabled Boolean false 是否禁用
日期选择器:mode = date
属性名 类型 默认值 说明
value String 当前日期 表示选中的日期,格式为 “YYYY-MM-DD”
start String 表示有效日期范围的开始,字符串格式为 “YYYY-MM-DD”
end String 表示有效日期范围的结束,字符串格式为 “YYYY-MM-DD”
fields String day 有效值 year、 month、 day,表示选择器的粒度
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabled Boolean false 是否禁用
普通选择器:mode = selector
属性名 类型 默认值 说明
range Array/Object Array mode 为 selector 或 multiSelector 时,range 有效
range-key String 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value Number 0 value 的值表示选择了 range 中的第几个(下标从 0 开始)
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabled Boolean false 是否禁用
title String 选择器标题(仅安卓有效)默认值为 “设置”
多列选择器:mode = multiSelector
属性名 类型 默认值 说明
range 二维 Array/Object Array mode 为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[[“a”,”b”], [“c”,”d”]]
range-key String 当 range 是一个二维 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value Array [] value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)
bindcolumnchange EventHandle 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabled Boolean false 是否禁用
title String 选择器标题(仅安卓有效)默认值为 “设置”
省市区选择器:mode = region
属性名 类型 默认值 说明
value Array [] 表示选中的省市区,默认选中每一列的第一个值
custom-item String 可为每一列的顶部添加一个自定义的项
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabled Boolean false 是否禁用
title String 选择器标题(仅安卓有效)默认值为 “设置”
fields 有效值
说明
year 选择器粒度为年
month 选择器粒度为月份
day 选择器粒度为天
示例:
<view class="section">
    <view class="section-title">时间选择器</view>
    <picker mode="time" value="{{time}}" start="11:11" end="23:11" bindchange="bindTimeChange">
        <view class="picker">
            当前选择: {{time}}
        </view>
    </picker>
</view>
<view class="section">
    <view class="section-title">单列选择器</view>
    <picker mode="selector" value="{{index}}" range="{{array}}" bind:change="selectorChange" title="普通选择器">
        <view class="picker">
            当前选择: {{array[index]}}
        </view>
    </picker>
</view>
<view class="section">
    <view class="section-title">多列选择器</view>
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" title="多列选择器">
        <view class="picker">
            当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
        </view>
    </picker>
</view>
<view class="section">
    <view class="section-title">地区选择器</view>
    <picker mode="region" bindchange="regionChange" custom-item="{{customItem}}" title="省市区选择器">
        <view class="picker">
            当前选择:{{regionData[0]}} {{regionData[1]}} {{regionData[2]}}
        </view>
    </picker>
</view>
Page({
    data: {
        time: '12:12',
        index: 1,
        array: ['科目一', '科目二', '科目三', '科目四'],
        multiIndex: [0, 0, 0],
        multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
        regionData: ['全部', '全部', '全部'],
        customItem: '全部'
    },
    bindTimeChange: function(e) {
        console.log('picker-time changed,值为', e.detail.value)
        this.setData({
            time: e.detail.value
        })
    },
    selectorChange: function (e) {
        console.log('picker-selector changed,值为', e.detail.value)
        this.setData(
            'index', e.detail.value
        );
    },

    bindMultiPickerChange: function (e) {
        console.log('picker-multiSelector changed,值为', e.detail.value)
        this.setData(
            'multiIndex', e.detail.value
        );
    },

    bindMultiPickerColumnChange: function (e) {
        console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
        var data = {
            multiArray: this.getData('multiArray'),
            multiIndex: this.getData('multiIndex')
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
            case 0:
                switch (data.multiIndex[0]) {
                    case 0:
                        data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
                        data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                        break;
                    case 1:
                        data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
                        data.multiArray[2] = ['鲫鱼', '带鱼'];
                        break;
                }
                data.multiIndex[1] = 0;
                data.multiIndex[2] = 0;
                break;
            case 1:
                switch (data.multiIndex[0]) {
                    case 0:
                        switch (data.multiIndex[1]) {
                            case 0:
                                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                                break;
                            case 1:
                                data.multiArray[2] = ['蛔虫'];
                                break;
                            case 2:
                                data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                                break;
                            case 3:
                                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                                break;
                            case 4:
                                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                                break;
                        }
                        break;
                    case 1:
                        switch (data.multiIndex[1]) {
                            case 0:
                                data.multiArray[2] = ['鲫鱼', '带鱼'];
                                break;
                            case 1:
                                data.multiArray[2] = ['青蛙', '娃娃鱼'];
                                break;
                            case 2:
                                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                                break;
                        }
                        break;
                }
                data.multiIndex[2] = 0;
                break;
        }
        this.setData('multiArray', data.multiArray);
        this.setData('multiIndex', data.multiIndex);
    },

    regionChange: function (e) {
        this.setData(
            'regionData', e.detail.value
        );
        console.log('picker-time changed,值为', e.detail.value)
    }

});

picker-view

解释:嵌入页面的滚动选择器

属性名 类型 说明
value NumberArray 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
indicator-style String 设置选择器中间选中框的样式
indicator-class String 设置选择器中间选中框的类名
mask-style String 设置蒙层的样式
mask-class String 设置蒙层的类名
bindchange EventHandle 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value 为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)

Tips:

其中只可放置<picker-view-column/>组件,其他节点不会显示。

picker-view-column 

解释:仅可放置于<picker-view />中,其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致。

radio-group

解释:单项选择

内部由多个 <radio/> 组成
属性名 类型 默认值 说明
bindchange EventHandle   <radio-group/> 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项 radio 的 value}

radio

解释:单选项目

属性名 类型 默认值 说明
value String   <radio/> 标识。当该 <radio/> 选中时,<radio-group/> 的 change 事件会携带 <radio/> 的 value
checked Boolean false 当前是否选中
disabled Boolean false 是否禁用
color Color   radio 的颜色,同 CSS 的 color
示例:
<radio-group bindchange="radioChange">
    <label s-for="{{item in items}}">
        <radio value="{{item.name}}"
            checked="{{item.checked}}"
            disabled="{{item.disabled}}"
            color="#ff0000" />
        {{item.value}}
    </label>
</radio-group>
Page({
    data: {
        items: [
            {name: 'USA', value: '美国'},
            {name: 'CHN', value: '中国', checked: true},
            {name: 'BRA', value: '巴西'},
            {name: 'JPN', value: '日本'},
            {name: 'ENG', value: '英国', disabled: true},
            {name: 'TUR', value: '法国'}
        ]
    },
    radioChange: function(e) {
        console.log('radio发生change事件,携带value值为:', e.detail.value);
    }
});

slider

解释:滑动选择器

属性说明:

属性名 类型 默认值 说明
min Number 0 最小值
max Number 100 最大值
step Number 1 步长,取值必须大于 0,并且可被 (max - min) 整除
disabled Boolean false 是否禁用
value Number 0 当前取值
backgroundColor Color #e9e9e9 背景条的颜色
block-size Number 24 滑块的大小,取值范围为 12 - 28
block-color Color #ffffff 滑块的颜色
activeColor Color #1aad19 已选择的颜色
show-value Boolean false 是否显示当前 value
bindchange EventHandle 完成一次拖动后触发的事件,event.detail = {value: value}
bindchanging EventHandle 拖动过程中触发的事件,event.detail = {value: value}

示例:

<!--- slider.swan --->
<p>default</p>
<slider></slider>
<br/>
<slider value="50"></slider>
<br/>

<p>disabled</p>
<slider disabled></slider>
<slider disabled value="50" step="20" showValue></slider>
<br/>

<p>swan-slider-demo</p>
<slider showValue></slider>
<br/>

<slider showValue max="2000" min="200" step="50"></slider>
<br/>
<p>value=100 小于 min: 200</p>
<slider showValue max="2000" min="200" step="50" value="100"></slider>
<p>value=3000 大于于 max: 2000</p>
<slider showValue max="2000" min="200" step="50" value="3000"></slider>
<br/>


<p>step: 20</p>
<slider step="20" showValue></slider>
<br/>
<slider step="20" showValue value="20"></slider>

<p>color</p>
<slider step="20" showValue value="20" backgroundColor="red"></slider>
<slider step="20" showValue value="20" backgroundColor="red" activeColor="green"></slider>

<p>event</p>
<slider bind:change="sliderChange" bind:changing="sliderChanging" showValue></slider>
// slider.js
Page({
    data: {
        zztest: 'hzz780'
    },
    sliderChange: e ={
        console.log('sliderChange', e, e.detail);
    },
    sliderChanging: e ={
        console.log('sliderChanging', e, e.detail);
    }
});

switch

解释:开关选择器

属性名 类型 默认值 说明
checked Boolean false 是否选中
type String switch 样式,有效值:switch,checkbox
color Color #09bb07 switch 的颜色,同 CSS 的 color
bindchange EventHandle checked 改变时触发 change 事件,event.detail={ value:checked}
示例:
<!-- swith.swan -->
<form bind:submit="formSubmit">
    <switch name="switch1" type="checkbox" checked="false"></switch>
    <switch name="switch2" color="red"></switch>
    <switch name="switch3" checked></switch>
    <switch name="switch4" checked="true"></switch>
    <switch name="switch5" bind:change="changeEvent"></switch>
    <button formType="submit">提交</button>
    <button formType="reset">重置</button>
</form>
// switch.js
changeEvent: e ={
    console.log('change', e);
},
formSubmit: e ={
    console.log('submit', e);
}
Tips: 

switch 类型切换时在 iOS 自带振动反馈,可在系统设置 -声音与触感 -系统触感反馈中关闭。

textarea

多行输入框。

属性名 类型 默认值 说明
value String 输入框的内容
placeholder String 输入框为空时占位符
placeholder-style String 指定 placeholder 的样式
placeholder-class String textarea-placeholder 指定 placeholder 的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度
auto-height Boolean false 是否自动增高,设置auto-height时,style.height不生效
bindfocus EventHandle 输入框聚焦时触发,event.detail = { value, height },height
bindblur EventHandle 输入框失去焦点时触发,event.detail = {value, cursor}
bindlinechange EventHandle 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput EventHandle 当键盘输入时,触发 input 事件,event.detail = {value, cursor}, bindinput 处理函数的返回值并不会反映到 textarea 上
bindconfirm EventHandle 点击完成时, 触发 confirm 事件,event.detail = {value: value}
cursor Number -1 指定focus时的光标位置 10.8.5 以上
focus Boolean false 获取焦点 10.8.5 以上
fixed Boolean false 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true 10.8.5 以上
cursor-spacing Number 0 指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 10.8.5 以上
show-confirm-bar Boolean true 是否显示键盘上方带有”完成“按钮那一栏(仅ios支持) 10.8.5 以上
selection-start Number -1 光标起始位置,自动聚集时有效,需与selection-end搭配使用 10.8.5 以上
selection-end Number -1 光标结束位置,自动聚集时有效,需与selection-start搭配使用 10.8.5 以上
adjust-position Boolean true 键盘弹起时,是否自动上推页面 10.8.5 以上
示例代码:
<!--textarea.swan-->
<view class="section">
    <textarea placeholder="自动变高"
        auto-height
        bindinput="bindInput"
        bindfocus="bindFocus"
        bindblur="bindBlur"
        bindlinechange="bindLinechange" />
</view>
<view class="section">
    <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"  />
</view>
//textarea.js
Page({
    data: {
        height: 20,
        focus: false
    },
    bindFocus(e) {
        console.log('focus - e:', e);
        swan.showToast({
            'title': `focus - ${e.detail.value}`
        });
    },
    bindInput(e) {
        console.log('input - e:', e);
        swan.showToast({
            'title': `input - ${e.detail.value}`
        });
    },
    bindLinechange(e) {
        console.log('linechange - e:', e);
        swan.showToast({
            'title': `linechange - ${e.detail.value}`
        });
    },
    bindBlur(e) {
        console.log('blur - e:', e);
        swan.showToast({
            'title': `blur - ${e.detail.value}`
        });
    }
});
以上内容是否对您有帮助:
二维码
建议反馈
二维码