coolui-scroller

Appearance

当前文档原生微信小程序版coolui-scroller 改用 uni-app 版 →

search 搜索组件 ​

介绍 ​

用于搜索场景的输入框组件。可置于头部插槽中。

引入 ​

在app.json或index.json中引入组件

json
"usingComponents": {
  "search": "coolui-scroller/search/index"
}

代码演示 ​

基础使用

html
<scroller>
  <view slot="header">
    <search
      search-btn="search-btn"
      model:key="{{key}}"
      bind:confirm="confirm"
      bind:btnClick="onBtnClick"
    />
  </view>
</scroller>
js
Page({
  data: {
    key: '',
  },
  onBtnClick({ detail }) {
    wx.showToast({
      title: '来自右侧按钮点击:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
  confirm({ detail }) {
    wx.showToast({
      title: '来自完成按钮触发:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
})

圆角

html
<scroller>
  <view slot="header">
    <search
      round
      search-btn="search-btn"
      model:key="{{key}}"
      bind:confirm="confirm"
      bind:btnClick="onBtnClick"
    />
  </view>
</scroller>
js
Page({
  data: {
    key: '',
  },
  onBtnClick({ detail }) {
    wx.showToast({
      title: '来自右侧按钮点击:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
  confirm({ detail }) {
    wx.showToast({
      title: '来自完成按钮触发:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
})

可清除

html
<scroller>
  <view slot="header">
    <search
      clearable
      search-btn="search-btn"
      model:key="{{key}}"
      bind:confirm="confirm"
      bind:btnClick="onBtnClick"
    />
  </view>
</scroller>
js
Page({
  data: {
    key: '',
  },
  onBtnClick({ detail }) {
    wx.showToast({
      title: '来自右侧按钮点击:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
  confirm({ detail }) {
    wx.showToast({
      title: '来自完成按钮触发:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
})

可清除

html
<scroller>
  <view slot="header">
    <search
      clearable
      search-btn="search-btn"
      model:key="{{key}}"
      bind:confirm="confirm"
      bind:btnClick="onBtnClick"
    />
  </view>
</scroller>
js
Page({
  data: {
    key: '',
  },
  onBtnClick({ detail }) {
    wx.showToast({
      title: '来自右侧按钮点击:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
  confirm({ detail }) {
    wx.showToast({
      title: '来自完成按钮触发:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
})

可设置按钮

可利用暴露出来的 css 变量修改样式

html
<scroller>
  <view slot="header">
    <search
      style="--color: #fff;--placeholder-color: rgba(255,255,255, 0.7);--input-bg-color:#7d6f93;"
      model:key="{{key}}"
      bind:confirm="confirm"
      bind:btnClick="onBtnClick"
    />
  </view>
</scroller>
js
Page({
  data: {
    key: '',
  },
  onBtnClick({ detail }) {
    wx.showToast({
      title: '来自右侧按钮点击:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
  confirm({ detail }) {
    wx.showToast({
      title: '来自完成按钮触发:' + detail.key,
      icon: 'none',
      duration: 4000,
    })
  },
})

配置 ​

参数说明类型默认值版本
round圆角设置，可设置true或false，设置为 true 时搜索框为胶囊样式Booleanfalse3.0.0
clearable清除按钮设置，可设置true或false，设置为 true 时开启清除按钮，可清除输入框内容Booleanfalse3.0.0
button可对右侧按钮进行设置,详见按钮配置Obj3.0.0
key搜索的关键字，输入框里输入的内容。支持双向绑定 model:keyString3.0.0

按钮配置 ​

参数说明类型默认值版本
show设置按钮是否一直显示，可设置true或false。设为true时按钮一直显示，设为false时按钮只有在输入框获取焦点时显示Booleanfalse3.0.0
hide设置按钮是否一直隐藏，可设置true或false。设为true时按钮一直隐藏，设为false时按钮只有在输入框获取焦点时显示Booleanfalse3.0.0
text设置按钮显示文字String搜索3.0.0

外部样式 ​

在组件外部修改组件里的元素样式，可做局部调整。

名称说明类型版本
search-btn设置右侧搜索按钮的 classString3.0.0

css 变量 ​

在组件外部修改组件里的元素样式，可做局部调整。

名称说明类型版本
--color设置 input 输入文字的颜色String3.3.2
--placeholder-color设置 placeholder 文字的颜色String3.3.2
--input-bg-color设置 input 背景颜色String3.3.2