微信小程序 WeUI·搜索组件
2022-05-12 17:44 更新
Searchbar
搜索组件Searchbar提供搜索的功能，并展示搜索的结果。
示例代码：
{
"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)
},
});
属性列表
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| ext-class | string | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | |
| focus | boolean | false | 否 | 是否在组件开始创建的时候focus搜索输入框 |
| placeholder | string | 搜索 | 否 | 搜索输入框的placeholder |
| value | string | 否 | 搜索输入框的默认值 | |
| search | function | 是 | 输入过程不断调用此函数得到新的搜索结果，参数是输入框的值value，返回Promise实例 | |
| throttle | number | 500 | 否 | 调用search函数的间隔，单位ms |
| cancelText | string | 取消 | 否 | 取消按钮的文本 |
| cancel | boolean | true | 否 | 是否显示取消按钮 |
| bindfocus | eventhandle | 否 | 在输入框focus的时候触发事件 | |
| bindblur | eventhandle | 否 | 在输入框blur的时候触发事件 | |
| bindclear | eventhandle | 否 | 在clear按钮点击的时候触发事件 | |
| bindinput | eventhandle | 否 | 在输入框输入过程中触发事件 | |
| bindselectresult | eventhandle | 否 | 在选择搜索结果的时候触发事件 |
以上内容是否对您有帮助：
更多建议：