May 21, 2021 WeChat Mini Program Development Document
Searchbar, the search component, provides search functionality and shows the results of the search.
{
"usingComponents": {
"mp-searchbar": "../components/searchbar/searchbar"
},
"navigationBarTitleText": "UI组件库"
}
<view class="page">
<view class="page__hd">
<view class="page__title">SearchBar</view>
<view class="page__desc">搜索栏</view>
</view>
<view class="page__bd">
<mp-searchbar bindselectresult="selectResult" search="{{search}}"></mp-searchbar>
</view>
</view>
Page({
data: {
inputShowed: false,
inputVal: ""
},
onLoad() {
this.setData({
search: this.search.bind(this)
})
},
search: function (value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([{text: '搜索结果', value: 1}, {text: '搜索结果2', value: 2}])
}, 200)
})
},
selectResult: function (e) {
console.log('select result', e.detail)
},
});
Property | Type | The default | Required | Description |
---|---|---|---|---|
ext-class | string | Whether | A class added to the internal structure of a component that can be used to modify the style inside a component | |
focus | boolean | false | Whether | Whether to search the input box when the component starts to be created |
placeholder | string | Search | Whether | Search for placeholder for the input box |
value | string | Whether | Search for the default value of the input box | |
search | function | Is | The input procedure constantly calls this function to get new search results, and the argument is the value value of the input box, value, returning the Promise instance | |
throttle | number | 500 | no | Call the interval of the Search function, unit MS |
cancelText | string | Cancel | no | Cancel button text |
cancel | boolean | true | Whether | Whether to display the cancel button |
bindfocus | eventhandle | Whether | The event is triggered when the box focus is entered | |
bindblur | eventhandle | Whether | The event is triggered when the box blour is entered | |
bindclear | eventhandle | Whether | Triggers an event when the clear button is clicked | |
bindinput | eventhandle | Whether | The event is triggered during the input box input | |
bindselectresult | eventhandle | Whether | Triggers an event when search results are selected |