使用Vant list列表组件实现无限下拉加载数据的功能

之前做无限下拉加载数据的功能都是通过监听页面滚动来实现的，代码量多而且还麻烦，最后还得销毁监听滚动的状态。

正巧项目用的Vant框架，于是乎抽空用Vant提供的列表组件来改造一下，代码一下子就清爽好多！

Vant列表组件基础用法

List组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。

Demo

本Demo根据我的项目改造而来，仅供参考哈，实际使用还是得结合你们自己的项目来哈！

template部分

<van-list
    v-model="loading"              
    :finished="finished"          
    finished-text="没有更多了"     
    @load="getList"             
>
    <div v-for="(item,index) in list" :key="index">
       {{item}}
    </div>
</van-list>

js部分

export default {
    name: "List",
    data() {
        return {
            current: 1,       // 当前页码
            pageSize: 10,     // 每页数量
            loading: false,   // 加载状态
            finished: false,  // 是否结束
            list: [],         // 列表数据
        };
    },
    methods: {
        getList() {
            let that = this
            // 这里是我封装的接口请求方法
            GET_LIST(
                {
                    page: that.current,
                    pageSize: that.pageSize,
                },
                function (res) {
                    if (res.data.code === 0) {
                        // 数据更新完毕后，将loading设置成false
                        that.loading = false
                        // 这边碰到一个问题，配合tab切换的时候onLoad执行两遍导致数据重复
                        // 解决方案：如果list有数据并且是第一页，那肯定是重复请求了，所以阻断掉
                        if (that.list.length > 0 && res.data.data.current_page == 1) {
                            return false
                        }
                        that.list = that.list.concat(res.data.data.data)
                        // 判断总页数是否大于当前页
                        if (res.data.data.last_page > that.current) {
                            that.current += 1;
                        } else {
                            that.finished = true;
                        }
                    }
                }
            )
        }
    }
};