VUE_vant上拉加载请求接口数据使用

最新推荐文章于 2024-02-22 11:29:48 发布

小歪 | 前端

最新推荐文章于 2024-02-22 11:29:48 发布

阅读量868

点赞数

分类专栏： # VUE

本文链接：https://blog.csdn.net/weixin_44599931/article/details/112172968

版权

VUE 专栏收录该内容

114 篇文章 3 订阅

订阅专栏

使用：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vant</title>
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
    <script src='https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>

<body>
    <div id="app">

        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad"
            >
            <div style="width: 100%;height: 100px;background: red;margin-top: 2px;"
                v-for="item in list" :key="item.id">
                {{item.name}}
            </div>
        </van-list>

    </div>
</body>
</html>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [],           //数据列表
            loading: false,     //是否处于加载状态，加载过程中不触发load事件
            finished: false,    //是否已加载完成，加载完成后不再触发load事件
            updata:{
                pageNumber: 1,  //页码
                pageSize:10     //每页条数
            }
        },
        created() {
            this.getroadList()
        },
        methods: {
            getroadList() {
                axios.get('http://192.168.0.139/cUser', {           //请求接口
                    params: this.updata
                }).then( (res)=> {
                    let list = res.data.data.list
                    this.loading = false;               //是否处于加载状态，加载过程中不触发load事件
                    if (list == null || list.length === 0) {
                        this.finished = true;           // 加载结束
                        return;
                    }
                    this.list = this.list.concat(list); // 将新数据与老数据进行合并
                })
                .catch( (error)=> {
                    console.log(error);
                });
                
            },
            onLoad() {
                this.updata.pageNumber++;
                this.getroadList();
            },
        }
    });
</script>

注意：

设置<van-list>组件 :immediate-check="false"
理由：禁止 List 初始化时触发 load 事件。把加载第一屏的事件放在 created() 里面。

在这里插入图片描述

小歪 | 前端

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
VUE_vant上拉加载请求接口数据使用

使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g
复制链接

扫一扫

专栏目录