<template lang="html">
  <div class="main">
     <div class='list-box'>
      <ul v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-immediate-check="true"
          infinite-scroll-distance="40">
        <li v-for="(item ,index) in list" :key="index">
              {{item.title}}
        </li>
      </ul>
       <!--顯示加載中狀態(tài)-->
      <div class="loading-box" v-if="loading">
          <mt-spinner type="fading-circle" class="loading-more"  color="#0188fd"></mt-spinner>	                   		                  
      </div>			 
      <div class="no-more" v-if="noMore">親，已經(jīng)到底了哦！</div> 		
    </div>  
  </div>
</template>

 <script>
  import { InfiniteScroll , Spinner } from 'mint-ui';
  export default {
    components: {
			'mt-spinner':Spinner,
		},
    data() {
      return {
		list: [], 
        pagesNum: 1,//總頁數(shù)
		loading: false, // 加載中轉(zhuǎn)圈
	    noMore: false, // 是否還有更多
        endTime: "",        
        page: {
          access_token: this.$route.query.access_token,
          planId: this.$route.query.id,
          pageNumber: 1,
          pageSize: 20,
        }
      }
    },
    created() {
      this.initData();
    },
    mounted() {
 
    },
    methods: {
      initData: function(type) {  
        this.loading = true
		axios.get("xxx", {
				params: this.page
			})
			.then((data) => {
				if (type === 'loadMore') {
				  this.list = this.list.concat(data.data.data.list);
				} else {      
				  this.list = data.data.data.list;
									  
				}
 
		// 設(shè)置分頁
		this.pagesNum = data.data.data.pages; //總頁數(shù)	                                            
		this.loading = false;          
	   
			})
			.catch(function(err) {
				console.log(err);
			})
 
	  },
      loadMore:function() {
		this.page.pageNumber += 1 // 增加分頁
		this.loading = true // 加載中
		if(this.page.pageNumber <= this.pagesNum){
			//加載數(shù)據(jù)
			setTimeout(()=>{
				this.initData('loadMore')
			},200)
		   
		 
		}else{ 
			this.noMore = true // 顯示沒有更多了
			this.loading = false // 關(guān)閉加載中
			return false
		}
	   
	   
	 }
    }
 
  }
</script>

<style>
  .list-box {
        max-height:calc(100% - 1.8rem); //必須有高度
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
		}
  .list-box ul{
      width:100%;
   }
  .list-box ul li{
       width: 100%;
	   height: 0.55rem;
	   @include flexbox();
	   @include justify-content(space-between);
	   border-bottom: 1px solid #e4e4e4;
  }
</style>

<div class="wrap"
   v-infinite-scroll = "loadMore"
   infinite-scroll-disabled = "loading"
   infinite-scroll-distance = "10"
></div>

.wrap {
    height: 100vh;
    overflow-y: auto;
}