更新记录

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

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

1.0.4（2024-05-10） 下载此版本

修复noDataLoadError状态判断失效问题，删除多余打印信息

1.0.3（2024-05-06） 下载此版本

文档修改

平台兼容性

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内部调用。

若有问题可联系作者：：