uniapp 分页分页分页,真麻烦,用uview组件u-loadmore,但是只有样式,方法害得自己写

<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
						}
					}
				});
			},

成了

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值