uni-app 上拉加载使用uni-ui 的 LoadMore 组件

刺骨的言语ヽ痛彻心扉 2022-12-23 09:56 195阅读 0赞

### 实现列表下拉加载 上拉刷新 ###

*  上拉加载
 *  下拉刷新
 *   *  使用onPullDownRefresh
 *  遇到的问题

# 上拉加载 #

我在代码里是配合list使用的LoadMore 组件实现下拉加载，贴一个官网组件地址 [LoadMore ][LoadMore]  
下拉加载的原理大概是：

1.  设置好每页展示多少条数据，加载第一页。
2.  加载完后判断当前状态，如果数据列表的长度=全部数据长度，则将状态设置为`noMore`，否则为`more`。
3.  从第二页开始，每加载一页就在数据列表中拼接下一页内容。重复进行（2）直到加载完全部数据。
4.  当数据加载完毕后页码`pageNum`不再++。

# 下拉刷新 #

## 使用onPullDownRefresh ##

*  在 js 中定义 `onPullDownRefresh` 处理函数（和`onLoad`等生命周期函数同级），监听该页面用户下拉刷新事件。
 *  需要在 `pages.json` 里，找到的当前页面的pages节点，并在 style 选项中开启 `enablePullDownRefresh`。
 *  当处理完数据刷新后，`uni.stopPullDownRefresh`可以停止当前页面的下拉刷新。

//pages.json
    { 
    	"path": "pages/beiliao/beiliao",
    	"style": { 
    		"navigationBarTitleText": "备料单",
    		"navigationStyle": "custom",
    		"enablePullDownRefresh": true,
    		"app-plus": { 
    			"titleNView": false
    		}
    	 }
    },

具体代码：

<template>
    	<view style="background-color: #F0F0F0;">
    		<view class="box" style="padding:10px 10px;margin:70px 10px -10px 10px">
    			<uni-list style="background-color: #F0F0F0;">
    				<view v-for="(item,index) in tableList" :key="index">
    				    //list内容省略啦~
    					<uni-list-item showArrow :note="'xxx'" />
    				</view>
    				<view class="example-body">
    					<uni-load-more :status="status" :content-text="contentText"  @clickLoadMore="clickLoadMore"/>
    				</view>
    			</uni-list>
    		</view>
    	</view>
    </template>
    
    <script>
    	import util from '../../util/util.js';
    	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
    	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    	import uniList from "@/components/uni-list/uni-list.vue"
    	import uniSection from "@/components/uni-section/uni-section.vue"
    	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
    	export default { 
    		components: { 
    			uniPagination,
    			uniListItem,
    			uniList,
    			uniSection,
    			uniLoadMore
    		},
    		data() { 
    			return { 
    				total: 0,
    				pageNum: 1,
    				pageSize: 10,
    				tableList: [],
    				status: 'more',
    				contentText: { 
    					contentdown: '查看更多',
    					contentrefresh: '加载中',
    					contentnomore: '没有更多'
    				}
    			}
    		},
    		onLoad() { 
    			this.queryByInput();
    		},
    		//上拉加载
    		onReachBottom(){ 
    			if (this.status == 'noMore'){ 
    				return;
    			}
    			this.pageNum ++;
    			console.log(this.pageNum)
    			this.getTableList();
    		},
    		//下拉刷新
    		onPullDownRefresh(){ 
    			uni.stopPullDownRefresh();
    			this.tableList = [];
    			this.queryByInput()
    		},
    		methods: { 
    			queryByInput:function(){ 
    				this.pageNum = 1;
    				this.getTableList();
    			},
    			//条件查询
    			getTableList: function() { 
    				var that = this;
    				var params = { 
    					current: this.pageNum,
    					size: this.pageSize
    				}this.$http.get('/workshop/productionmaterialorder/page', params, { 
    				}).then(function(response) { 
    					//这里只会在接口是成功状态返回
    					that.total = response.total
    					//第一次加载时，若只有一页数据（这里写的简直if语句之王，大家懂的都懂，怪我太菜了！！）
    					if(that.tableList.length == 0) { 
    						that.status = 'more'
    						that.tableList = that.tableList.concat(response.records)
    						if(that.tableList.length == that.total) { 
    							that.status = 'noMore'
    							return false;
    						} 
    					} else { 
    						if(that.tableList.length == that.total) { 
    							that.status = 'noMore'
    							return false;
    						} else { 
    							that.status = 'more'
    							that.tableList = that.tableList.concat(response.records)
    						}
    					}
    				}).catch(function(error) { 
    					//这里只会在接口是失败状态返回，不需要去处理错误提示
    					console.log(error);
    				});
    			},
    			//点击查看更多触发事件
    			clickLoadMore(e) { 
    				// console.log('加载更多')
    			}
    		}
    	}
    </script>

# 遇到的问题 #

1.循环拼接，最后一页结束后又开始拼接第一页，主要是由于没有限制`pageNum`，当状态变成`noMore`不再进行页码的增加即可。

*  解决办法：

//上拉加载
    onReachBottom(){ 
        //解决上述问题
    	if (this.status == 'noMore'){ 
    		return;
    	}
    	this.pageNum ++;
    	console.log(this.pageNum)
    	this.getTableList();
    },

2.新增数据 ，如果要新增一条列表数据，我这里进行的操作是从A跳转页面B输入新息，新增后回到A页面，此时需要A重新加载页面。（加载页面在`onShow`中调用）而如果在从A跳转B时，页面状态可能是处于第三页，无法保留住此状态。

*  目前想到的解决方法：不刷新A，新增时返回新增数据的id,将新增信息添加至原本的列表下即可。

3.修改数据 ，A跳B修改，修改成功后返回A页面，存在情况和新增时一样，可能你在第三页选中某条数据进行修改，如果修改成功后重新加载A页面就会很麻烦，又要翻下去查看刚才修改的数据，考虑到这个问题所以我选择成功后不刷新A页面。

*  解决方法：修改时将对应数据的`index`传递给B页面，在B修改完数据后再把`index`返回给A，这样就可以把修改数据所在的位置记录下来。（AB页面怎么传参我之前写过，不再重复记录）

//如果返回的数据有index，则替换掉该位置修改前数据，没有则是新增操作进行刷新
    if(this.index) { 
    	this.tableList[this.index].xx= this.xx
    } else { 
    	this.tableList = [];
    	this.queryByInput();
    }

暂时遇到这些情况，后续会继续记录新问题，如果有什么错误地方请指正！！

[LoadMore]: https://ext.dcloud.net.cn/plugin?id=29