使用说明

// 按需引入需要在 app.scss 中引入对应样式 searchBar.scss
import { ClSearchBar } from "mp-colorui";

一般用法

参数说明

SearchBar 参数

参数	说明	类型	可选值	默认值
shape	搜索栏的形状	string	radius,round	radius
placeholder	占位内容	string	-	-
fix	是否固定最上端	string	true,false	false
searchType	搜索框右边显示的内容的类型	string	button,text,none,list	button
leftIcons	左边的图标组	icon[]	参考文档 Icon-iconName	[]
bgColor	背景色	string	参考文档 默认色	-
rightButtonColor	右侧按钮颜色	string	参考文档 默认色	white
rightTextColor	type 为 text 时，右侧文字颜色	string	参考文档 默认色-标准色	black
showResult	是否显示搜索结果	boolean	-	false
showLoading	是否显示搜索结果加载页面	boolean	-	false
result	搜索结果列表	result[]	参考下方 result 参数	[]
clear	是否显示清除按钮	boolean	-	false

result 参数

参数	说明	类型	可选值	默认值
title	搜索结果标题	string	-	-
desc	搜索结果详细内容	string	-	-

SearchBar 事件

事件名称	说明	参数返回
onIconClick	图标点击事件	index，参数 index 为第几个图标
onSearch	搜索事件	value，参数 value 为输入的内容
onInput	键盘输入事件	value，参数 value 为输入的内容
onTouchResult	搜索结果点击事件	index，参数 index 为结果下标
onFocus	搜索框聚焦事件	value, 参数 value 为输入的内容
onBlur	搜索框失焦事件	value, 参数 value 为输入的内容
onScrollToLower	搜索结果滑动到底部触发	-
onScrollToUpper	搜索结果滑动到顶部触发	-
onClear	清空搜索结果时触发	-

部分功能需扫码预览才能正常显示。

H5及小程序二维码