VUE+Vant 实现列表上拉加载、无限加载，vue实现无限加载

注意：item 循环中的字段item.message等 以接口返回为准。示例中api返回数据格式如下图。

vant官方文档：https://vant-contrib.gitee.io/vant/#/zh-CN/list

 <van-list style=" margin-bottom: 40px;margin-top: 45px;"
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad">

            <van-swipe-cell :before-close="beforeClose"  v-for="item in list" :key="item.id" :data-uid="item.uid">

                <van-cell
                          center
                          :icon="item.header_img"
                          :title=" '游客'+ item.uid"
                          :value="item.create_time"
                          :label="item.message"/>

                <template #right>
                    <van-button square type="danger" name="del" text="删除"/>
                </template>

            </van-swipe-cell>

        </van-list>



<script>
    import {Dialog} from 'vant';

    import { getLastMessage } from '../../request/api.js';//这里是api请求地址，根据实际项目为准

    export default {
        name: "index",
        data() {

            return {
                page: 1,
                list: [],
                loading: false,
                finished: false,
            };
        },
        methods: {
            // position 为关闭时点击的位置
            // instance 为对应的 SwipeCell 实例
            beforeClose({position, instance}) {
                switch (position) {
                    case 'left':
                    case 'cell':
                    case 'outside':
                        instance.close();
                        break;
                    case 'right':
                        Dialog.confirm({
                            message: '确定删除吗？',
                        }).then(() => {
                            instance.close();

                            console.log(instance.$attrs['data-uid']);//获取自定义属性值

                        }).catch(() => {
                            // on cancel
                        });
                        break;
                }
            },
            onLoad() {

                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
             

                    getLastMessage({
                        page: this.page
                    }).then(response => {

                        this.page++;//分页追加
                        this.loading = false;// 加载状态结束
                        this.list = this.list.concat(response.data.list);//追加数据
                        if (response.data.list.length === 0) {
                            this.finished = true; // 数据全部加载完成
                        }

                    }).catch(error => {
                        console.log(error)
                    });

            },
        },


    }
</script>