@mas.io/search-input NPM

安装

tnpm install --save @alipay/search-input

组件介绍

行业小程序搜索列表组件

支持输入时的防抖
支持自定义列表卡片和loading组件
支持历史搜索记录
支持图标自定义

参数说明

属性	必填	参数类型	参数说明	默认值
storageKey	N	string	如果传入storageKey，那么就启用历史搜索记录功能	''
placeholder	N	string	在未输入搜索关键词的时候，默认文本	输入关键字
maxLength	N	number	搜索栏里最大长度的字符数	20
isFocus	N	boolean	是否一直获取焦点	''
isShowCancelButton	N	boolean	是否有取消按钮	''
onCancel	Y	Function	点击取消按钮时候触发的事件	''
onConfirm	Y	Function	确认时候触发的事件	''
onKeyword	Y	Function	输入搜索关键词的时候时候触发的事件,有一个参数keyword，表示输入搜索框的文字。需要return一个返回值，返回值是一个数组对象，对象中需要有一个键为id的值,如果不需要用历史记录就可以不传入id	''

在小程序中使用

{
  "usingComponents": {
    "mas-search-list": "@alipay/search-list/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <mas-search-list
    showHistory='{{true}}'
    storageKey="historyStorageKey"
    onKeyword="onKeyword"
    onCancel="onCancel"
    onConfirm="onConfirm"
    searchList="{{ searchList }}"
    thumb="https://gw.alipayobjects.com/mdn/rms_6d74f8/afts/img/A*EOwYSohgmV8AAAAAAAAAAAAAARQnAQ"
  >
    <!-- 搜索列表的页面 -->
    <view slot="listItem" slot-scope="props">
      <view> {{props.data.address}}</view>
      <view> {{props.data.name}}</view>
    </view>
    <!-- 历史记录的列表页面 -->
    <view slot="historyItem" slot-scope="props">
      <view> {{props.data.address}}</view>
      <view> {{props.data.name}}</view>
    </view>
  <mas-record-list/>

mini-ali-ui @mas.io/falcon-core

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

1.0.2

3 years ago