支付宝小程序扩展表单 搜索框·SearchBar
搜索提供了用户进行文本查询的功能，用户可以针对当前页面的内容通过精确搜索和模糊搜索进行内容筛选和定位，提高查询效率。搜索栏激活后出现取消按钮。
说明：仅用于 UI 展示没有对应的业务逻辑功能。
扫码体验
示例代码
{
"defaultTitle": "Search-bar",
"usingComponents": {
"search-bar": "mini-ali-ui/es/search-bar/index"
}
}
<view>
<search-bar
value="{{value}}"
focus="{{true}}"
disabled="{{false}}"
maxLength="{{20}}"
showVoice="{{showVoice}}"
placeholder="搜索"
onInput="handleInput"
onClear="handleClear"
onFocus="handleFocus"
onBlur="handleBlur"
onCancel="handleCancel"
onSubmit="handleSubmit"
showCancelButton="{{false}}" />
</view>
<view>是否展示Voice图标
<checkbox onChange='onChange'/>
</view>
Page({
data: {
value: '',
showVoice: false,
},
handleInput(value) {
this.setData({
value,
});
},
handleClear() {
this.setData({
value: '',
});
},
handleFocus() {},
handleBlur() {},
handleCancel() {
this.setData({
value: '',
});
},
onChange(e) {
this.setData({
showVoice: e.detail.value,
});
},
});属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value | String | - | 搜索框的当前值。 |
| placeholder | String | - | placeholder。 |
| focus | Boolean | false | 自动获取光标。可选值：true、false。 |
| showVoice | Boolean | false | 是否展示voice图标。可选值：true、false。 |
| onInput | (value: String) => void | - | 键盘输入时触发。 |
| onClear | (val: String) => void | - | 点击 clear 图标触发。 |
| onFocus | () => void | - | 获取焦点时触发。 |
| onBlur | () => void | - | 失去焦点时触发。 |
| onCancel | () => void | - | 点击取消时触发。 |
| onVoiceClick | () => void | - | 点击 voice 图标时触发。 |
| onSubmit | (val: String) => void | - | 点击键盘的 enter 时触发。 |
| disabled | Boolean | false | 设置禁用。可选值：true、false。 |
| maxLength | Number | - | 最多允许输入的字符个数。 |
| showCancelButton | Boolean | false | 是否一直显示取消按钮。可选值：true、false。 |
| borderColor | String | #1677ff | 搜索输入框边框色。 |