vue MintUI实现上拉分页加载更多

 MintUI实现上拉分页加载更多要用到Infinite scroll

新闻页面
<template>
    <div>
        <ul
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10" class="list">
            <li v-for="(item,key) in list" :key="key" >{{item.title}}</li>
        </ul>
        <div>Loading 。。。</div>
    </div>
</template>
<script>
export default {
    data(){
       return{
            list:[],
            page:1,
            loading:false
       }
    },
     methods:{
         loadMore(){
            //  loadMore函数在dom渲染完成时会自动触发一次，所以可以将请求数据的函数放入调用
             this.requestData();
         },
         requestData(){
             /* 请求数据
                如果用jsonp请求数据的话，后台一定要支持jsonp
             */
            // 请求数据的开关
            this.loading=true;
            var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page='+this.page;
            this.$http.get(api).then((res) => {
                // 将页面中的数据依次拼接
                this.list=this.list.concat(res.body.result);
                /* 每次请求完成page++ */
                ++this.page;
                // 请求数据完成时将开关打开
                if(res.body.result.length<20){
                    // 当前页面的数据小于20条，则下一页肯定没数据，这是永久的关闭阀门
                    this.loading=true;
                }else{
                    // 否则继续请求数据
                this.loading=false;
                    
                }
            },(err) => {
                console.log(err)
            });
         }
     }
  
}
</script>

<style lang="scss" scoped>
.list{
    li{
        padding: 1rem;
        height: 3.4rem;
        line-height: 3.4rem;
        border-bottom: 1px solid #fff;
        font-size: 1.6rem;
        a{
            color: #666;
            text-decoration: none;
            
        }
    }
}
</style>

实际效果图：