(微信小程序之坑-2)
一、引入组件
1 、通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小。
在app.json中添加字段:
"useExtendedLib": {
"weui": true
}
2 、在 page.json 中引入组件
{
"usingComponents": {
"mp-searchbar": "weui-miniprogram/searchbar/searchbar"
}
}
二、wxml中添加组件
<mp-searchbar bindselectresult="selectResult" search="{{search}}"/>
属性列表
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
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 | 否 | 在选择搜索结果的时候触发事件 |
二、js中添加函数
onLoad(options) {
//修改search的this指向
this.setData({
search: this.search.bind(this)
})
},
search: function (value) {
return new Promise((resolve, reject) => {
resolve([{text: '搜索结果', value: 1}, {text: '搜索结果2', value: 2}])
})
},
// 选择结果的函数
selectResult (e) {
console.log('select result', e.detail)
},
search方法
方法返回一个Promise的实例。(具体的请自行搜索,这里只简单介绍使用)
返回数据必须要包含text字段,用于展示的内容