微信小程序 搜索框（searchbar组件的使用）

1.下载searchbar及相关联cell和cells组件
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
2.将组件放到代码模块下

3.修改json文件中组件路径引用


4.引用json部分

  "usingComponents": {
    "mp-searchbar": "../components/searchbar"
  },
  "navigationBarTitleText": "UI组件库"
}

5.引用wxml部分

<view class="page">
    <view class="page__bd">
        <mp-searchbar bindselectresult="selectResult" search="{{search}}"></mp-searchbar>
    </view>
</view>

6.引用js部分
要在onload里面设置search值
this.setData({
search: this.search.bind(this)
})

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)
    },
});

7.效果图