全部产品

SearchBar 搜索框

更新时间:2020-11-11 17:51

搜索提供了用户进行文本查询的功能,用户可以针对当前页面的内容通过精确搜索和模糊搜索进行内容筛选和定位,提高查询效率。搜索栏激活后出现取消按钮。

说明:仅用于 UI 展示没有对应的业务逻辑功能。

扫码体验

image.png

示例代码

// 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-
placeholderplaceholder。String-
focus自动获取光标。Booleanfalse
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-