更新记录

1.3.0（2023-10-26）

支持vue2,vue3

1.2.3（2022-09-19）

fix: autoJustify失效

1.2.2（2022-09-06）

字段名更正: fiexdHolder => fixedHolder

平台兼容性

zero-filter-bar

使用方法

符合easycom组件模式,使用uni_modules导入直接使用即可

参数说明

dataList示例：

// sort不传默认为false
// sort传入true默认为降序 desc
list:[
{
    id: 0,
    name: '综合',
},
{
    id: 1,
    name: '价格',
    sort: true
},
{
    id: 2,
    name: '年龄',
    sort: true
},
{
    id: 3,
    name: '经验',
    sort: true
},
{
    id: 4,
    name: '不要排序',
    sort: false
},
]

emits

refs 扩展

用于获取 scrollTop
this.$refs.zeroFilterBar.scrollTop
用于高亮 extra 右侧按钮
this.$refs.zeroFilterBar.setCurrentExtraOn()

使用示例

<template>
    <view>
    <zero-filter-bar  ref="zeroFilterBar" :dataList="filterList"  @filter='handleFilterItem' @extraClick='showDrawer()'></zero-filter-bar>
    <!-- 右侧按钮可结合uni-drawer抽屉使用 -->
    <uni-drawer ref="showRight" mode="right" width="320">
        <scroll-view style="height: 100%;" scroll-y="true">
               <view class="footer">
               自定义筛选条件
               </view>
                <view class="footer">
                    <button size="mini" class="btn btn_reset" type="primary">重置</button>
                    <button size="mini" class="btn" type="primary" @click="handleFilterExtra()">确定</button>
                </view>
            </view>
        </scroll-view>
    </uni-drawer>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                filterList: [
                    {
                        id: 0,
                        name: '综合',
                    },
                    {
                        id: 1,
                        name: '价格',
                        sort: true
                    },
                    {
                        id: 2,
                        name: '年龄',
                        sort: true
                    },
                    {
                        id: 3,
                        name: '经验',
                        sort: true
                    },
                    {
                        id: 4,
                        name: '不要排序',
                        sort: false
                    },
                    {
                        id: 5,
                        name: '最后一项',
                        sort: false
                    }
                ],
                // 如果顶部还有内容，且需要吸顶效果，可以传入needSticky
                needSticky:false
            }
        },
        onLoad() {

        },

        methods: {
            handleFilterItem(index,desc,item){
                console.log(index,desc,item)
            },

            handleFilterExtra() {
                // 确认自定义筛选事件后，高亮右侧按钮
                this.$refs.zeroFilterBar.setCurrentExtraOn()
                this.closeDrawer();
            },
            showDrawer() {
                this.$refs.showRight.open();
            },
            closeDrawer() {
                this.$refs.showRight.close();
            },
            onPageScroll(e) {
                let top =this.$refs.zeroFilterBar.scrollTop
                this.needSticky= e.scrollTop > top
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>

插件预览: