Vue.js框架--Ui框架的Mint UI中 Infinite scroll 集合API实现上拉分页更多（二十三）

主要操作技能：

   1>打开http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll文档查看

   

2>实现这个功能

编写代码：

  UserAdd.vue

<template>
	<div id="add">
		<h3>{{msg}}</h3>
		<!--无限滚动指令。-->
		<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
			 infinite-scroll-distance="10" class="list">
			<li v-for="item in list">{{ item }}</li>
		</ul>

	</div>

</template>
<script>
	export default {
		name: 'add',
		data() {
			return {
				msg: '用户添加',
				list: []
			}
		},
		methods: {
			loadMore() {
				
				for(var i = 0; i < 20; i++) {
					this.list.push("第"+i+"条")
				}

				console.log('ssss');
			}
		}
	}
	
	
</script>

效果：

再原来的基础添加一个变量j=0

效果:

说明： 可以查看到每次加载20个数据，下一次加载就是从0开始到19了！依次这样。肯定是不正确的!

再进行修改

效果：如下所示，数据就一直往下加载数据

通过上面的分析，可以用API新闻接口实现上拉分页更多数据。。。

<template>
	<div id="add">
		<h3>{{msg}}</h3>
		<!--上拉分页更多数据-->
		<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="list">
			<li v-for="item in list">{{ item.title }}</li>
		</ul>

		<p v-show="loading" class="page-infinite-loading">
			<mt-spinner type="fading-circle"></mt-spinner>
			加载中...
		</p>
	</div>

</template>

<script>
	export default {
		name: 'add',
		data() {
			return {
				msg: '用户添加',
				list: [],
				j: 0,
				loading: false, //默认是false 可以滚动哦！
				page: 1

			}
		},
		methods: {
			loadMore() {
				this.requestData();
			},

			requestData() {
				//				this.loading=true; //请求数据的开关 禁用
				var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
				this.$http.get(url).then((response) => {

					console.log(response);
					//加载的数据要存入的list中
					this.list = this.list.concat(response.data.result);

					++this.page; //每次请求完成,页数加1

					//判断请求的是否有数据
					if(response.data.result.length < 20) {
						this.loading = true; //禁用请求
					} else {
						this.loading = false; //启用请求
					}

				}, (err) => {
					console.log(err)
				})
			}
		}
	}
</script>

效果：

当数据加载到第8页时，就没有数据了，那么就会出现如下：