阅读(1873)
赞(0)
微信小程序 WeUI·搜索组件
2020-07-27 14:51:33 更新
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 | 否 | 在选择搜索结果的时候触发事件 |