更新记录

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>
        <dyList
                ref="dyList"
                :list.sync="list"
                :pageOption.sync="pageOption"
                @getList="getList"
        >
            <!--  #ifdef MP-WEIXIN -->
            <!-- 只在微信小程序编译，因小程序不能循环同名插槽，所以只能在外部循环，整体插入进入 -->
            <view
                    class="itemBox"
                    :slot="'dyListItem'+index"
                    v-for="(row,index) in list"
                    :key="index"
            >
                <item01 :row="row" :index="index" @del="del"></item01>
            </view>
            <!--  #endif -->
            <!--  #ifndef MP-WEIXIN -->
            <!-- 除微信小程序以外编译，如果不需要兼容微信小程序，仅需下列代码 -->
            <view
                    class="itemBox"
                    slot="dyListItem"
                    slot-scope="{row,index}"
            >
                <item01 :row="row" :index="index" @del="del"></item01>
            </view>
            <view class="scrollTop" slot="scrollTop" @click="scrollTopFn()">返回顶部</view>
            <!--  #endif -->
        </dyList>
    </view>
</template>

<script>
    import dyList from '@/components/dy-list/index'
    import item01 from '@/components/dy-list/item01'

    export default {
        components: {dyList, item01},
        data() {
            return {
                options: {
                    loadingText: '加载中...',
                    finishTest: '数据加载完毕',
                },
                pageOption: { // 分页数据
                    current: 1,
                    size: 10,
                    total: 0,
                },
                list: [],
            }
        },
        methods: {
            getList(e, success, fail) {
                let _self = this;
                // 模拟请求
                let timer = setTimeout(() => {
                    let code = 200;
                    if (code === 200) {
                        for (let i = 0; i < _self.pageOption.size; i++) {
                            _self.list.push({
                                name: 'item',
                                index: i,
                            });
                        }
                        _self.pageOption.total = 105;
                        success && success(_self.pageOption.total);
                    } else {
                        fail && fail();
                    }
                }, 150)
            },
            del(row, index) {
                this.list.splice(index, 1);
                console.log(this.list);
            },
            scrollTopFn() {
                console.log(this.$refs.dyList);
                this.$refs.dyList.scrollTopFn();
            }
        }
    }
</script>

示例代码-无需兼容微信小程序方式

<template>
    <view>
        <dyList
                ref="dyList"
                :list.sync="list"
                :pageOption.sync="pageOption"
                @getList="getList"
        >
            <view
                    class="itemBox"
                    slot="dyListItem"
                    slot-scope="{row,index}"
            >
                <item01 :row="row" :index="index" @del="del"></item01>
            </view>
        </dyList>
    </view>
</template>

<script>
    // 同 兼容微信小程序方式
</script>