微信小程序 WeUI·搜索組件

2022-05-12 17:44 更新

Searchbar

搜索組件Searchbar提供搜索的功能，并展示搜索的結(jié)果。

示例代碼：

{
  "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: '搜索結(jié)果', value: 1}, {text: '搜索結(jié)果2', value: 2}])
            }, 200)
        })
    },
    selectResult: function (e) {
        console.log('select result', e.detail)
    },
});


屬性列表

屬性類型默認(rèn)值必填說明
ext-classstring否添加在組件內(nèi)部結(jié)構(gòu)的class，可用于修改組件內(nèi)部的樣式
focusbooleanfalse否是否在組件開始創(chuàng)建的時候focus搜索輸入框
placeholderstring搜索否搜索輸入框的placeholder
valuestring否搜索輸入框的默認(rèn)值
searchfunction是輸入過程不斷調(diào)用此函數(shù)得到新的搜索結(jié)果，參數(shù)是輸入框的值value，返回Promise實(shí)例
throttlenumber500否調(diào)用search函數(shù)的間隔，單位ms
cancelTextstring取消否取消按鈕的文本
cancelbooleantrue否是否顯示取消按鈕
bindfocuseventhandle否在輸入框focus的時候觸發(fā)事件
bindblureventhandle否在輸入框blur的時候觸發(fā)事件
bindcleareventhandle否在clear按鈕點(diǎn)擊的時候觸發(fā)事件
bindinputeventhandle否在輸入框輸入過程中觸發(fā)事件
bindselectresulteventhandle否在選擇搜索結(jié)果的時候觸發(fā)事件


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號