更新记录

1.0.2（2024-06-07）

增加图标配置 高亮item定位到中间 增加动图说明 完善说明文挡

1.0.0（2024-06-06）

新增

平台兼容性

hbxw-filter-navbar组件

介绍

过滤器navvar组件，过滤内容通过picker选择，超出可左右滚动

使用示例

使用前要以新建一个页面拷贝下面代码做一下测试，熟悉后再使用到项目中

<template>
    <view class="page-container">
        <hbxw-filter-navbar :filters="filters" @change="filterChange" />
        <view class="test-item">这是内容块1</view>
        <view class="test-item">这是内容块2</view>
        <view class="test-item">这是内容块3</view>
        <view class="test-item">这是内容块4</view>
        <view class="test-item">这是内容块5</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                filters: [
                    {
                        name: '地区',
                        type: 'area',
                        // 是否高亮
                        isActive: false,
                        // 当前过滤项依赖的picker数据
                        pickerKey: 'name',
                        pickerValue: 'id',
                        pickerList: [
                            {
                                name: '全部',
                                id: -1
                            },
                            {
                                name: '广东',
                                id: 0
                            },{
                                name: '湖南',
                                id: 1
                            }
                        ]
                    },{
                        name: '状态类型',
                        type: 'status',
                        isActive: false,
                        pickerKey: 'name',
                        pickerValue: 'id',
                        pickerList: [
                            {
                                name: '全部',
                                id: -1
                            },
                            {
                                name: '待响应',
                                id: 0
                            },{
                                name: '已响应',
                                id: 1
                            }
                        ]
                    },{
                        name: '派单模式',
                        type: 'mode',
                        isActive: false,
                        pickerKey: 'name',
                        pickerValue: 'id',
                        pickerList: [
                            {
                                name: '全部',
                                id: -1
                            },
                            {
                                name: '征集',
                                id: 0
                            },{
                                name: '抢单',
                                id: 1
                            }
                        ]
                    },{
                        name: '测试模式',
                        type: 'test',
                        isActive: false,
                        pickerKey: 'name',
                        pickerValue: 'id',
                        pickerList: [
                            {
                                name: '全部',
                                id: -1
                            },
                            {
                                name: '征集',
                                id: 0
                            },{
                                name: '抢单',
                                id: 1
                            }
                        ]
                    },{
                        name: '测试模式0',
                        type: 'test0',
                        isActive: false,
                        pickerKey: 'name',
                        pickerValue: 'id',
                        pickerList: [
                            {
                                name: '全部',
                                id: -1
                            },
                            {
                                name: '征集',
                                id: 0
                            },{
                                name: '抢单',
                                id: 1
                            }
                        ]
                    }
                ]
            }
        },
        methods: {
            filterChange(res) {
                // 这里可以拿到过滤器返回的内容，做自己的一些处理即可
                const { pickerList, pickerValue,pickerItem, navIndex, navItem } = res;
                console.log('---- filterChange ----:', pickerList, pickerValue, pickerItem, navIndex, navItem)

                // 高亮操作,高亮当前过滤选项，其余的选项置灰
                const filtersClone = JSON.parse(JSON.stringify(this.filters));
                filtersClone.forEach((filterItem, filterIndex) => {
                    if (filterIndex === navIndex) {
                        filterItem.isActive = true;
                    } else {
                        filterItem.isActive = false;
                    }
                } )
                this.filters = filtersClone;
            }
        }
    }
</script>

<style>
.page-container{
    display: flex;
    flex-direction: column;
}
.test-item{
    width: 100%;
    height: 400rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

API

Props

Events

注：该组件依赖uni-icons，安装完组件的时候在组件文件夹上右键-选择安装第三方依赖即可