更新记录

1.0.7（2025-06-18） 下载此版本

大版本更新 1.深思熟虑去掉了loading，error，empty配置，取消了弹窗提示等，希望让组件更加干净纯粹 2.将缺省图片与加载失败图片替换成了svg格式 3.新增autoRefreshByParamsChange字段，作用是参数改变是否刷新列表 4.修改了部分属性名称 5.新增了list-item插槽，不再需要通过list插槽遍历

1.0.6（2025-05-12） 下载此版本

删除uniapp的loading方法

1.0.5（2024-05-15） 下载此版本

使用defineExpose抛出refresh（刷新）和search（查询）方法

平台兼容性

uni-app

其他

cl-scroll-view

说明

该组件是对uniapp原生scroll-view组件的二次封装，我们平时在使用scroll-view组件的时候，如果想要一个完整的功能需要添加各种属性与方法，所以封装了该组件对部分操作进行简化。

使用方式

<template>
    <view class="content">
        <view class="section_title">
            基本使用
        </view>
        <view style="height: 600rpx;border: 1px solid gainsboro;">
            <cl-scroll-view :apiFun="apiFun" :params="searchParams">
                <template v-slot:list="{list}">
                    <view class="list_box">
                        <view v-for="item in list" :key="item" class="item">{{item}}</view>
                    </view>
                </template>
            </cl-scroll-view>
        </view>
    </view>
</template>
<script setup>
    import {
        reactive,
        ref
    } from 'vue';
    const searchParams = reactive({
        pageSize: 10,
        pageNum: 1
    })
    // 模仿接口
    const apiFun = (params) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const data = Array.from({
                    length: params.pageSize
                }, (_, i) => (i + 1) + (params.pageNum - 1) * params.pageSize)
                resolve({
                    code: 200,
                    data,
                    message: '查询成功！'
                })
            }, 1000)
        })
    }
</script>

属性列表

插槽

注意：若想要在组件外部使用search（查询）或refresh（刷新）方法，可以使用ref进行调用，并将调用方法放在nextTick内部调用。

若有问题可联系作者：微信号：fjl_code_life