微信小程序 WeUI·搜索组件

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 在选择搜索结果的时候触发事件

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《微信小程序 WeUI·搜索组件》
文章链接:https://zhuji.vsping.com/312003.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。