更新记录

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>

插件预览:

小程序搜索: zerojs 零技术

预览的小程序不一定能及时更新当前插件