uniapp 免费插件 滚动列表

黑色滴夜

自动加载，上拉加载，下拉刷新，可自定义

[JavaScript] 纯文本查看 复制代码

defaultOption: {
    page: 1, // 分页
    size: 15, // 分页大小
    auto: true, // 自动加载
    height: null, // 组件高度
    disabled: false, // 禁用
    background: '', // 背景颜色属性
    emptyImage: '', // 空数据提示图片
    offsetBottom: 0, // 底部高度补偿
    pullDownSpeed: 0.5, // 下拉速率
    lowerThreshold: 40, // 距离底部上拉加载距离
    refresherThreshold: 80, // 距离顶部下拉刷新距离
    refreshDelayed: 800, // 刷新延迟
    refreshFinishDelayed: 800, // 刷新完成后的延迟
    safeArea: false, // 是否开启安全区域适配
    emptyTextColor: '#82848a', // 空提示文字颜色
    loadTextColor: '#82848a', // 上拉加载文字颜色
    loadIconColor: '#82848a', // 上拉加载图标颜色
    refresherTextColor: '#82848a', // 下拉刷新文字颜色
    refresherIconColor: '#82848a', // 下拉刷新图标颜色
    emptyText: '暂无列表~', // 空数据提示文字
    loadingText: '正在加载中~', // 加载中文字
    loadFailText: '加载失败啦~', // 加载失败文字
    noMoreText: '没有更多啦~', // 没有更多文字
    refreshingText: '正在刷新~', // 正在刷新文字
    refreshFailText: '刷新失败~', // 刷新失败文字
    refreshSuccessText: '刷新成功~', // 刷新成功文字
    pulldownText: '下拉刷新~', // 下拉中的文字
    pulldownFinishText: '松开刷新~' // 下拉完成的文字
}

<template>
    <view class="page-wrap">
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="handleTest">
                <view class="avatar">{{ index + 1 }}</view>
                <view class="info">
                    <view class="info-item"></view>
                    <view class="info-item"></view>
                </view>
            </view>
        </scroll-list>
    </view>
</template>

<script>
export default {
    data() {
        return {
            option: {
                size: 5,
                auto: true
            },
        };
    },
    onLoad() {
    },
    () {},
    onHide() {},
    methods: {
        // 加载数据
        load(paging) {
            setTimeout(() => {
                let list = [];
                for (var i = 0; i < paging.size; i++) {
                    list.push(i);
                }
                this.list = [...this.list, ...list];
                // 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
                this.$refs.list.loadSuccess({ list: this.list, total: 50 });
                // 加载失败
                // this.$refs.list.loadFail()
            }, this.$u.random(100, 1000));
        },
        // 刷新刷剧
        refresh(paging) {
            setTimeout(() => {
                let list = [];
                for (var i = 0; i < paging.size; i++) {
                    list.push(i);
                }
                this.list = list;
                // 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
                this.$refs.list.refreshSuccess({ list: this.list, total: 50 });
                // 刷新失败
                // this.$refs.list.refreshFail()
            }, this.$u.random(100, 1000));
        }
    }
};
</script>

插件市场地址 :　https://ext.dcloud.net.cn/plugin?id=5303