最近一直在写vue代码，好久没有进行知识总结了，想着写点什么,正好踩了一个坑，浪费了一个下午的时间填了一下

移动端实现滚动加载

• 框架是vue
• mint-ui

环境准备（默认已将所有引入的组件安装）

import Vue from 'vue'
import axios from 'axios'
import url from 'js/api.js'
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);

vue实例

new Vue({
    el:'.container',
    data:{
        searchData:null,//数据存储
        pageNum:1,
        pageSize:8,
        isAllloaded:false,//判断数据是否全部加载完毕
         onloading:false//当判断为true时 执行加载数据的方法
    }

js逻辑

 getSearchlist(){
            this.onloading=true  //函数执行时先设置为true才能进行下面
            if(this.isAllloaded) return // 若数据加载完毕后择直接返回
            axios.get(url.searchlist,{
                params:{
                    keyword,
                    id,
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,         
                }
            }).then(res=>{      
                console.log(this.pageSize,this.pageNum)
                let currentLists=res.data.lists   //声明一个当前列表
                
                if(currentLists.length<this.pageSize ){ //如果当前列表的列数小于一页所拥有的数即为数据加载完毕
                    this.isAllloaded=true
                }
                if(this.searchData){  //如果已经有数据加载到searchData上
                    
                    this.searchData=this.searchData.concat(currentLists)//把当前页继续拼接到searchData上
                }else{
                    this.searchData=currentLists  //否则将当前页赋值给searchData 即 第一次加载数据
                }      
                this.pageNum++ //页数增加一页
                 this.onloading=false //  数据停止加载        
            }).catch(err=>{
                console.log(err)
            })
        }

以上是业务逻辑实现，下面说一下我踩到的坑

坑

mint-ui中的InfiniteScroll在页面中的引入方法

<ul
  v-infinite-scroll="getSearchlist"
  infinite-scroll-disabled="onloading"
  infinite-scroll-distance="10">
  <li v-for="item in searchData">{{ item }}</li>
</ul>

该ul的父元素的高度必须给定，否则onloading无法从true 变为false，
择数据会不断地加载下去