H5使用vant-ui的List组件实现“上拉加载更多”功能

1、引入VantUi的List组件

安装步骤见官网：https://vant-contrib.gitee.io/vant/next/#/zh-CN/quickstart
或移步https://www.cnblogs.com/huihuihero/p/11418541.html，搜索vant-ui

2、示例

<template>
    <div>
        <!--vant-list用于监听滚动事件及设置加载相关事宜-->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="-- 没有更多了 --"
          @load="onLoad"  <!--监听用户上拉操作-->
          :immediate-check=false  <!--初始化页面时不检查滚动位置-->
        >           
            <div class="book-list" >
                <div class="every-book" v-for="(item,index) in bookList" :key="index">
                    ......
                </div>
            </div>
        </van-list>
    </div>
</template>


<script>
import api from "@/services/index";

export default {
    data(){
        return{
            bookList: [],

            loading: false,  //加载状态
            finished: false,  //是否全部加载完毕
            page: 1,
            pagesize: 15,  //每次请求数据数量。在设置:immediate-check=false后，pagesize最好设置大一点，
                           //以保证第一次获取的数据列表渲染出来能超过屏幕长度（有滚动条出现就行），否则无法触发上拉操作
            }
        },
        created(){
            this.getBookList();
        },
        methods:{
            getBookList(){
                this.$axios.get(`${api.bookurl}/getBook?page=${this.page}&pagesize=${this.pagesize}`)   //设置请求的页码和数据数量
                .then(res=>{
                    if(res.data.code==200){
                        this.loading = false   //取消正在加载状态
                        let infolist=res.data.data.list
                        if(infolist){
                            this.bookList=this.bookList.concat(infolist);
                            if(infolist.length<this.pagesize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
                                this.finished = true;
                            }
                        }else{
                            this.finished = true;  
                        }   
                    }
                    else{  //接口请求失败处理
                        this.$toast(res.data.msg)
                        this.loading=false
                        if(this.page>1){
                            this.page-=1
                        }
                    }
                }).catch(()=>{  //接口请求错误处理
                    this.$toast("服务器开小差了呢，请稍后再试")
                    this.loading=false
                    if(this.page>1){
                        this.page-=1
                    }
                })
            },
            //上拉时执行此函数
            onLoad() {
                let times=setTimeout(()=>{
                    this.page+=1  //每请求一次，页面数+1
                    this.getBookList() 
                    clearTimeout(times)
                },500)
            }
        },
    }
</script>