区别于官网教程,这里总结更为白话。

要实现的需求是,比如起初有十条数据,下拉至底部,追加某数量的数据。

比如我的项目中,我把它放在了数据展示的底部,上代码:

<view>
			<template>		
					<u-card :data="tableData" v-for="(item) in tableData" :key="item.id" :show-head="false" >
							<view class="" slot="body">
								<view class="u-body-item u-flex u-row-between u-p-b-0">
									<view class="u-body-item-title u-line-2 u-flex u-row-between">
									仓库:{{item.storageName}}
									</view>
								</view>
								<view class="u-body-item u-flex u-row-between u-p-b-0">
									<view class="u-body-item-title u-line-2 u-flex u-row-between">
										品类:{{item.pinleiName}}
										品目:{{item.pinmuName}}
									</view>
								</view>
								<view class="u-body-item u-flex u-row-between u-p-b-0">
									<view class="u-body-item-title u-line-2">名称:{{item.name}} 规格:{{item.guige}} 型号:{{item.xinghao}}</view>
								</view>
								<view class="u-body-item u-flex u-row-between u-p-b-0">
									<view class="u-body-item-title u-line-2">数量:{{item.shuliang}}  单位:{{item.danwei}}</view>
								</view>
							</view>
						</u-card>
						<view class="wrap">
							<u-loadmore :status="status" />
						</view>				
			</template>
		</view>	

此处强调的是u-loadmore。

通过status设置组件的状态,加载前值为loadmore,加载中为loading,没有数据为nomore

加载前,显示"加载更多",加入点击可选,是因为数据不够一页时,无法触发页面的onReachBottom生命周期加载中,显示"正在加载...",2种动画可选加载后,如果还有数据,回到"加载前"状态,否则加载结束,显示"没有更多了"

核心功能是onReachBottom函数:注意不在methods里面

onReachBottom() {
				if(this.currentPage >= this.pages) return ;
				this.status = 'loading';
				this.currentPage = ++ this.currentPage;
				setTimeout(() => {
					this.getTongji()
					if(this.currentPage >= this.pages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},

这里的currentPage是当前的页码,pages是总页数,

方法生效时,当前页码自增加一,调用查询数据的方法:

	getTongji:function(){
				this.$u.api.getTongji({"material":this.searchForm,"currentPage":this.currentPage,"pageSize":this.pageSize}).then(res=>{
					if(res.code==200){
					res.data.records.forEach(e=>{
						this.tableData.push(e)
					})
					this.pages=res.data.pages
					this.currentPage=res.data.current
					this.totalCount=res.data.total
					}else if(res.code==401){
						uni.navigateTo({
							url:"../login/login"
						})
						
					}else{
							uni.showToast({
								title:"加载错误",
								icon:"none",
							})
						}
				})
			},

注意成功之后的数据应该push进数组中,而不是直接等于,否则就是下拉换页的效果了。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐