W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
搜索提供了用戶進行文本查詢的功能,用戶可以針對當前頁面的內(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,
});
},
});
屬性 | 類型 | 默認值 | 描述 |
---|---|---|---|
value | String | - | 搜索框的當前值。 |
placeholder | String | - | placeholder。 |
focus | Boolean | false | 自動獲取光標。可選值:true、false。 |
showVoice | Boolean | false | 是否展示voice圖標??蛇x值:true、false。 |
onInput | (value: String) => void | - | 鍵盤輸入時觸發(fā)。 |
onClear | (val: String) => void | - | 點擊 clear 圖標觸發(fā)。 |
onFocus | () => void | - | 獲取焦點時觸發(fā)。 |
onBlur | () => void | - | 失去焦點時觸發(fā)。 |
onCancel | () => void | - | 點擊取消時觸發(fā)。 |
onVoiceClick | () => void | - | 點擊 voice 圖標時觸發(fā)。 |
onSubmit | (val: String) => void | - | 點擊鍵盤的 enter 時觸發(fā)。 |
disabled | Boolean | false | 設(shè)置禁用??蛇x值:true、false。 |
maxLength | Number | - | 最多允許輸入的字符個數(shù)。 |
showCancelButton | Boolean | false | 是否一直顯示取消按鈕??蛇x值:true、false。 |
borderColor | String | #1677ff | 搜索輸入框邊框色。 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: