更新记录

2.1（2024-05-17） 下载此版本

新增

1.返回顶部单独做成组件

2.列表为空时插槽

修改兼容性问题，测试了网页/APP/微信小程序，理论上其他小程序都是兼容的（未测试）。

2.0（2024-05-17） 下载此版本

新增

1. 列表每一项字段映射的demo. 2.列表是否需要返回顶部，字段：scrollTopShow 修改兼容性问题，测试了网页/APP/微信小程序，理论上其他小程序都是兼容的（未测试）。

1.0.0（2023-09-25） 下载此版本

创建

平台兼容性

列表加载

该组件自动处理了上拉加载，分页，loading，下拉刷新，数据加载完毕，返回顶部等功能，用了之后，发现真香，不用过多去做很多重复的工作，为了让任何列表组件通用，该组建没有样式，样式完全自定义，定义一次，相同的列表都能使用。

第一步，引用组件

import dyList from '@/components/dy-list/index'
// 必须给dyList的父组件指定宽高，dyList内容使用的宽高为100%
import item01 from '@/components/dy-list/item01'
// item01为自定义组件，需要多少列表样式就可以自定义多少，定义了之后类似的列表即可复用，不同列表的不同字段可以通过字段映射实现，详见示例代码

第二步，注册组件

components: {
    dyList, item01
}

Props

Options

Events

Slot

示例代码

<template>
    <view class="content">
        <dyList class="dyList" ref="dyList" :options.sync="options" :list.sync="list" :pageOption.sync="pageOption"
            @getList="getList">
            <template slot="dyListItem">
                <view class="dyListItem" v-for="(row,index) in list" :key="index">
                    <item01 :fieldMap="fieldMap" :row="row" :index="index" @del="del"></item01>
                </view>
            </template>
            <view class="nullBox" slot="nullBox">没有数据</view>
        </dyList>
    </view>
</template>

<script>
    import dyList from '@/uni_modules/dy-list/components/dy-list/index.vue'
    import item01 from '@/uni_modules/dy-list/components/dy-list/item01.vue'
    // item01不属于默认组件，可以替换为任何内容，所以，字段映射，属性这些不作为文档内容。

    export default {
        components: {
            dyList,
            item01
        },
        data() {
            return {
                options: {
                    nullBoxText: '数据不知道去哪里了',
                    loadingText: '拼命加载中',
                    finishText: '没有更多数据了',
                    scrollTopShow: false,
                    current: 'current',
                    total: 'total',
                },
                pageOption: { // 分页数据
                    current: 1,
                    size: 10,
                    total: 0,
                },
                list: [],
                // 字段映射，同一个位置，不同字段，都可以用字段映射出去
                fieldMap: {
                    field1: 'index',
                    field2: 'name',
                }
            }
        },
        onLoad() {
            let _self = this;
        },
        methods: {
            getList(e, success, fail) {
                let _self = this;
                // 模拟数据请求
                let timer = setTimeout(() => {
                    let code = 200;
                    if (code === 200) {
                        // 添加数据时，只需要push，不能push的情况已经判断了。
                        for (let i = 0; i < _self.pageOption.size; i++) {
                            _self.list.push({
                                id: Math.random(),
                                name: 'item',
                                index: i,
                            });
                        }
                        _self.pageOption.total = 60;
                        success && success(_self.pageOption.total);
                    } else {
                        fail && fail();
                    }
                }, 700)
            },
            del(row, index) {
                this.list.splice(index, 1);
                console.log(this.list);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        width: 750rpx;
        height: 960rpx;

        .dyList {
            width: 100%;

            .nullBox {
                line-height: 100rpx;
                text-align: center;
                color: #a8a8a8;
            }
        }
    }
</style>