标签：false vant pagesize List H5 infolist data page

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
                    }
                })
            },
            //上拉时执行此函数
            onl oad() {
                let times=setTimeout(()=>{
                    this.page+=1  //每请求一次，页面数+1
                    this.getBookList() 
                    clearTimeout(times)
                },500)
            }
        },
    }
</script>

标签：false,vant,pagesize,List,H5,infolist,data,page
来源： https://www.cnblogs.com/huihuihero/p/14171852.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。