vue2.0和mintui-infiniteScroll 结合实现无线滚动加载

 <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>
       <!--显示加载中状态-->
      <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">亲，已经到底了哦！</div> 		
    </div>  
  </div>
</template>
 <script>
  import { InfiniteScroll , Spinner } from 'mint-ui';
  export default {
    components: {
			'mt-spinner':Spinner,
		},
    data() {
      return {
		list: [], 
        pagesNum: 1,//总页数
		loading: false, // 加载中转圈
	    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;
									  
				}

		// 设置分页
		this.pagesNum = data.data.data.pages; //总页数	                                            
		this.loading = false;          
	   
			})
			.catch(function(err) {
				console.log(err);
			})

	  },
      loadMore:function() {
		this.page.pageNumber += 1 // 增加分页
		this.loading = true // 加载中
		if(this.page.pageNumber <= this.pagesNum){
			//加载数据
			setTimeout(()=>{
				this.initData('loadMore')
			},200)
		   
		 
		}else{ 
			this.noMore = true // 显示没有更多了
			this.loading = false // 关闭加载中
			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>