SearchBar 搜索栏

可用于用户输入搜索信息

使用指南

Taro-UI 版本需要在 v1.3.1 以上，在 Taro 文件中引入组件

import { AtSearchBar } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

@import "~taro-ui/dist/style/components/search-bar.scss";
@import "~taro-ui/dist/style/components/button.scss";
@import "~taro-ui/dist/style/components/icon.scss";

一般用法

说明：

• 由于微信开发者工具的问题，Input 的 placeholder 在 value 存在的情况下，会出现重叠，在真机上不会出现此问题，可以忽略

• 该组件为受控组件，开发者需要通过 onChange 事件来更新 value 值变化，value 与 onChange 函数必填

• 由于此组件是基于小程序的 Input 进行封装，该组件是原生组件，使用前请阅读使用限制

import Taro from '@tarojs/taro'
import { AtSearchBar } from 'taro-ui'
export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      value: ''
    }
  }
  onChange (value) {
    this.setState({
      value: value
    })
  }
  render () {
    return (
      <AtSearchBar
        value={this.state.value}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

自定义按钮文字和点击事件

import Taro from '@tarojs/taro'
import { AtSearchBar } from 'taro-ui'
export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      value: ''
    }
  }
  onChange (value) {
    this.setState({
      value: value
    })
  }
  onActionClick () {
    console.log('开始搜索')
  }
  render () {
    return (
      <AtSearchBar
        actionName='搜一下'
        value={this.state.value}
        onChange={this.onChange.bind(this)}
        onActionClick={this.onActionClick.bind(this)}
      />
    )
  }
}

一直显示按钮

import Taro from '@tarojs/taro'
import { AtSearchBar } from 'taro-ui'
export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      value: ''
    }
  }
  onChange (value) {
    this.setState({
      value: value
    })
  }
  onActionClick () {
    console.log('开始搜索')
  }
  render () {
    return (
      <AtSearchBar
        showActionButton
        value={this.state.value}
        onChange={this.onChange.bind(this)}
        onActionClick={this.onActionClick.bind(this)}
      />
    )
  }
}

参数

事件