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>