uniapp使用uni-load-more组件上拉加载列表

2,652 阅读1分钟

1.在列表底部引入

<uni-load-more :status="status" :icon-size="14" :content-text="contentText" >

2.data里面设参

ifBottomRefresh: false,//是否触底
status: 'more',
totalCount: 1,
params: {
    pageNo: 1,
    pageSize: 5
    },
contentText: 
    {
    contentdown: '上拉加载更多~',
    contentrefresh: '加载中',
    contentnomore: '暂无更多~'
    },
    data: [] //列表数据

3.获取列表

//获取列表
			getlist() {
				this.$axios({
					url: "/user/plot/plotList",
					method: "post",
					data: {
						lng: this.longitude,
						lat: this.latitude,
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						type: this.type,
					}
				}).then((res) => {
					console.log('res', res)
					//请求接口成功之后,判断加载状态,处理数据	
                                        if (res.result.pages >= this.params.pageNo) {
						if (this.ifBottomRefresh) {
							this.orderList = this.orderList.concat(res.result.list)
						} else {
							this.orderList = res.result.list
						}
					} else {
						this.status = 'noMore'
					}

					if (this.params.pageNo >= res.result.pages) {
						this.status = 'noMore'
					}
					this.params.pageNo++;
				})
			},

4.触底函数

//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				console.log("触底")
				this.status = 'loading';
				this.ifBottomRefresh = true
				this.getList()
			} else {
				console.log('123')
				this.status ="noMore"
			}
		},