搜索提供了用户进行文本查询的功能,用户可以针对当前页面的内容通过精确搜索和模糊搜索进行内容筛选和定位,提高查询效率。搜索栏激活后出现取消按钮。
说明:仅用于 UI 展示没有对应的业务逻辑功能。
扫码体验
示例代码
// API-DEMO page/component/search-bar/search-bar.json
{
"defaultTitle": "小程序AntUI组件库",
"usingComponents": {
"search-bar": "mini-antui/es/search-bar/index"
}
}
<!-- API-DEMO page/component/search-bar/search-bar.axml -->
<view>
<search-bar
value="{{value}}"
placeholder="搜索"
onInput="handleInput"
onClear="handleClear"
onFocus="handleFocus"
onBlur="handleBlur"
onCancel="handleCancel"
onSubmit="handleSubmit"
showCancelButton="{{false}}" />
</view>
// API-DEMO page/component/search-bar/search-bar.js
Page({
data: {
value: '美食',
},
handleInput(value) {
this.setData({
value,
});
},
handleClear(value) {
this.setData({
value: '',
});
},
handleFocus() {},
handleBlur() {},
handleCancel() {
this.setData({
value: '',
});
},
handleSubmit(value) {
my.alert({
content: value,
});
},
});
属性
属性名 | 描述 | 类型 | 默认值 | 必填 |
value | 搜索框的当前值。 | String | - | 否 |
placeholder | placeholder。 | String | - | 否 |
focus | 自动获取光标。 | Boolean | false | 否 |
onInput | 键盘输入时触发。 | (value: String) => void | - | 否 |
onClear | 点击 clear 图标触发。 | (val: String) => void | - | 否 |
onFocus | 获取焦点时触发。 | () => void | - | 否 |
onBlur | 失去焦点时触发。 | () => void | - | 否 |
onCancel | 点击取消时触发。 | () => void | - | 否 |
onSubmit | 点击键盘的 enter 时触发。 | (val: String) => void | - | 否 |
disabled | 设置禁用。 | Boolean | - | 否 |
maxLength | 最多允许输入的字符个数。 | Number | - | 否 |
showCancelButton | 是否一直显示取消按钮。 | Boolean | - | 否 |
在文档使用中是否遇到以下问题
更多建议
匿名提交