更新记录

1.0.0（2025-04-23） 下载此版本

插件初次提交

平台兼容性

cl-auto-page-list 组件文档

一个基于 UniApp 的虚拟分页组件，用于对静态列表数据进行分页展示，支持下拉刷新、滚动加载、自定义过滤和空状态显示。

属性（Props）

方法（Methods）

通过组件 ref 调用：

<template>
    <view class="cl_flex_page">
        <cl-nav-bar></cl-nav-bar>
        <uni-search-bar v-model="params.label" style="background-color: #fff;" placeholder="请输入关键字查询"
            @confirm="handleSearch">
        </uni-search-bar>
        <cl-auto-page-list class="list_box" :list="list" ref="clAutoPageListRef" :params="params">
            <template #list={list}>
                <view class="list_box_item" v-for="(item,index) in list" :key="index">
                    {{item.label}}
                </view>
            </template>
        </cl-auto-page-list>
    </view>
</template>

<script setup>
    import {
        reactive,
        ref
    } from 'vue'
    const params = reactive({
        label: '',
    })

    const list = Array.from({
        length: 500
    }, (_, index) => {
        return {
            label: `我是展示的值${index}`,
            value: `value${index}`
        }
    })
    const clAutoPageListRef = ref()
    const handleSearch = () => {
        clAutoPageListRef.value.search()
    }
</script>

<style lang="scss" scoped>
    .list_box {
        flex: 1;
        overflow-y: auto;

        &_item {
            padding: 20rpx;
            margin-bottom: 20rpx;
            background-color: aqua;
        }
    }
</style>