<u-loadmore :status="status" class="load" />

data声明:

// 加载更多
				status: 'loadmore',
				list: [],
				page: 1, //第几页
                suo: true,

script:

首先第一次请求列表

// 第一次请求全部通知列表
			requestnotice() {
				uni.request({
					url: '****', //仅为示例,并非真实接口地址。
					method:"GET",
					data: {
						
						page: 1,
						limit: 10
					},
					success: (res) => {
						console.log("初始请求通知列表", res.data);
						this.list = res.data.data
						//在这里要进行一个判断,当后端传给我的数据小于每页的数据时就显示没有更多了
						if (res.data.data.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.data.length < 10) {
							this.status = 'nomore';
							this.suo = false
						}else if(res.data.data.length = 10){
							this.status = 'loadmore';
							this.suo = true
						}
					}
				});
			},

然后上拉需要在onReachBottom()生命周期中:

onReachBottom() {
			if (this.suo) {  //定义个小锁,当没有数据时锁住suo
				this.status = 'loading';
				this.page = ++this.page;
				setTimeout(() => {
					this.loadnotice()
				}, 1000)
			}

		},

然后上拉请求:

loadnotice() {
				uni.request({
					url: '***', //仅为示例,并非真实接口地址。
					method:"GET",
					data: {
						
						page: this.page,
						limit: 10
					},
					success: (res) => {
						console.log("上拉请求通知列表", res.data); 
						this.list = this.list.concat(res.data.data)
						 //在这里要进行一个判断,当后端传给我的数据小于每页的数据时就显示没有更多了
						if (res.data.data.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.data.length < 10) {
							this.status = 'nomore';
							this.suo = false
						}else if(res.data.data.length = 10){
							this.status = 'loadmore';
							this.suo = true
						}
					}
				});
			},

成了

Logo

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

更多推荐