FilterBar 筛选栏

组织下拉、排序、筛选和切换显示方式等操作。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 筛选栏 -->
<fui-filter-bar :items="filterItems" @change="handleFilterChange" />

页面提供 filterItems 对象数组，使用 text 显示文字，type 可为 dropdown、text、sort、filter 或 switch。

属性

属性	类型	说明	官网默认值
items	Array	筛选项数据	[]
coexist	Boolean	下拉、文字和排序条件是否允许共存	false
height	Number / String	高度，单位 rpx	88
background	String	背景色	#fff
isLine	Boolean	是否显示底边线	true
lineColor	String	边线颜色	#eee
color	String	默认文字颜色	#7F7F7F
activeColor	String	选中文字颜色	#181818
size	Number / String	字号，单位 rpx	28

事件

事件	说明	回调参数
change	点击筛选栏选项	{ index, items }

插槽

插槽	说明
—	官网未列出该组件的插槽