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

蔚落 2024-02-19 12:34 24阅读 0赞

**主要操作技能：**

1>打开[http://mint-ui.github.io/docs/\#/zh-cn2/infinite-scroll][http_mint-ui.github.io_docs_zh-cn2_infinite-scroll]文档查看

![70][]

2>实现这个功能

![70 1][]

**编写代码：**

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>

**效果：**

**![70 2][]**

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

![70 3][]

效果:

![70 4][]

![70 5][]

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

**再进行修改**

![70 6][]

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

![70 7][]

**通过上面的分析，可以用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>

效果：

![70 8][]

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

![70 9][]

[http_mint-ui.github.io_docs_zh-cn2_infinite-scroll]: http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll
[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5b36dc2d240d433f81810b9eb54ec523.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e76df57686ec4c1a96195af5f47107b6.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b9e38c75f9644c9eac4cf51795888fb2.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/976e45cd6e4d4bf6bf681c296c73a53a.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/68c0fa536dce4a95ac32282b359a7072.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/dc8b887af64b4cd48999f0259be154aa.png
[70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/91903385ddd940698f054edaa313f922.png
[70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/36272a5a26174458abee59dac8e13774.png
[70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/432e9f4a10fb47f0bb6575e30ca8dd9d.png
[70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0deaaa302ee84886aa8a5d62dd942b62.png