封装vant list组件封装vant 的list组件。以后就不用编写对应的冗余代码..................

封装vant 的list组件。以后就不用编写对应的冗余代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <script type="text/javascript" src="../../../public/jquery/jquery-3.3.1.min.js"
        th:src="@{/jquery/jquery-3.3.1.min.js}"></script>
    <!--=======================导入Vue==================================-->
    <script src="../../../public/vant/4.8.0/vue.3.4.14.js"></script>
    <script src="../../../public/vant/4.8.0/vant.js"></script>

    <link rel="stylesheet" href="../../../public/vant/4.8.0/index.css" />

    <title>测试demo</title>
    <style>
        body {
            background: #f7f7f7;
        }

        #app {
            padding: 6px;
        }

        .hideOverlay {
            background: none;
        }
    </style>
</head>



<body>
    <div id="app">

        <ahead-vant-list ref="listRef" :list_data="queryList" @onload="onLoad1" :searchobj="searchObj">
            <template #listwrapper>

                <van-cell v-if="queryList.length>0" style="height: 100px;" v-for="item in queryList" :key="item" :title="item.content" ></van-cell>
                <van-empty v-else description="无数据"></van-empty>
            </template>
        </ahead-vant-list>

    </div>


</body>

<script type="module">
    const { createApp, reactive, toRefs, ref, watch, onMounted, onBeforeMount, computed, $refs } = Vue;
    import aheadVantList from './list.js';
    const app = createApp({
        setup() {

        },
        data() {
            return {
                //渲染数据
                queryList: [],
                //分页参数和条件
                searchObj: { type: "get", url: "url", search: { page: 1, size: 10 } }
            }
        },
        mounted() {
            //this.onLoad1();
        },
        methods: {
            onLoad1(data) {
                console.log(data);
                this.queryList = data;
            }
        },
    })

    app.component('ahead-vant-list', aheadVantList);
    app.use(vant);
    app.mount("#app");
</script>


<script>
    //app vant工具类
</script>

</html>

</html>

export default {
    emits: ['onload'],//声明
    setup() {
    },
    data() {
        return {
            loading: false,
            finished: false,
            refreshing: false,
            list: [],
        };
    },
    created() {
        console.log(this.searchobj)
    },
    mounted() {
    },
    methods: {
        //下拉加载
        onLoadFun() {
            setTimeout(() => {
                console.log('下拉加载');
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                this.getData();
            }, 1000)
        },
        onRefresh() {
            console.log("刷新")
            this.searchobj.search.page = 1;
            this.finished = false;
            this.loading = true;

            this.onLoadFun();
        },
        getData() {
            let that = this;
            $.ajax({
                type: this.searchobj.type,
                url: this.searchobj.url,
                data: this.searchobj.search,
                success: function (data) {
                    const { flag, result } = that.returnData(data);
                    if (flag) {
                        //合并查询数据
                        that.list = that.list.concat(result.records);
                        //将数据通知父组件
                        that.$emit("onload", that.list);
                        //关闭loading
                        that.loading = false;
                        //如果还有数据则继续查询
                        that.searchobj.search.page++;
                        //如果没有数据则查询结束
                        if (that.list.length >= result.total) {
                            that.finished = true;
                        }
                    }else{
                        that.finished = true;
                    }

                }
            })
        },
        returnData(res) {
            let status = res.status;
            switch (status) {
                case 200:
                    vant.showSuccessToast({
                        message: '查询成功',
                        position: 'bottom',
                    });
                    return { "flag": true, "result": res.data };
                case 500:
                    vant.showFailToast({
                        message: res.msg,
                        position: 'bottom',
                    });
                    return { "flag": false, "result": res.msg };
                default:
                    break;
            }
        }
    },
    /*
    */
    props: ["list_data", "onload", "searchobj"],
    template: `
    <van-pull-refresh
             v-model="refreshing" 
             @refresh="onRefresh">
       
       <van-list 
                v-model:loading="loading" 
                :finished="finished" 
                finished-text="没有更多了"
                @load="onLoadFun">

         <slot name="listwrapper"></slot>
         
        </van-list>
    </van-pull-refresh>
`,
};