支付寶小程序擴展表單 搜索框·SearchBar

搜索提供了用戶進行文本查詢的功能，用戶可以針對當前頁面的內(nèi)容通過精確搜索和模糊搜索進行內(nèi)容篩選和定位，提高查詢效率。搜索欄激活后出現(xiàn)取消按鈕。

說明：僅用于 UI 展示沒有對應(yīng)的業(yè)務(wù)邏輯功能。

掃碼體驗

示例代碼

{
 "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,
   });
 },
});

屬性