SearchBar 搜索栏

用于展现搜索栏，提醒用户输入相关内容进行搜索。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "SearchBar",
    "usingComponents": {
        "wux-search-bar": "../../dist/search-bar/index"
    }
}

示例

<view class="page">
    <view class="page__hd">
        <view class="page__title">SearchBar</view>
        <view class="page__desc">搜索栏</view>
    </view>
    <view class="page__bd">
        <view class="sub-title">Normal</view>
        <wux-search-bar clear maxlength="8" />
        <view class="sub-title">Focus</view>
        <wux-search-bar clear focus />
        <view class="sub-title">Show cancel button</view>
        <wux-search-bar clear show-cancel value="{{ value }}" controlled placeholder="Search" bind:change="onChange" bind:focus="onFocus" bind:blur="onBlur" bind:confirm="onConfirm" bind:clear="onClear" bind:cancel="onCancel" />
    </view>
</view>

Page({
    data: {
        value: '',
    },
    onChange(e) {
        console.log('onChange', e)
        this.setData({
            value: e.detail.value,
        })
    },
    onFocus(e) {
        console.log('onFocus', e)
    },
    onBlur(e) {
        console.log('onBlur', e)
    },
    onConfirm(e) {
        console.log('onConfirm', e)
    },
    onClear(e) {
        console.log('onClear', e)
        this.setData({
            value: '',
        })
    },
    onCancel(e) {
        console.log('onCancel', e)
    },
})

视频演示

SearchBar

API

SearchBar props

SearchBar externalClasses