uniapp的分页加载没有用到uni-load-more

简单粗暴上代码

1:template文件

<template>
	<view class="energy">
		<view class="content">
			<div class="contentab">
				<div>
					<view v-for="(item,index) in list" :key="item.id" class="box">
						<view class="flexbox">
							<view class="picleft"> 
								<img :src="item.thumb_url" class="pic" />
							</view>
							<view class="txtright">
								<view class="mglow">
									<text class="number">{{item.price}}
									</text>
								</view>
								<view @click="showToggle(index)" class="title mglow">
									查看
									<span class="iconAdd" v-if="currentIdx != index">∧</span>
									<span class="iconReduce" v-if="currentIdx == index">∨</span>
								</view>
							</view>
							<view class="txtright">
								<view class="title mglow">
									{{item.tree_name}}
								</view>
								<view>
									<text style="margin-right:2%;" class="duibtn">兑换</text>
								</view>
							</view>
						</view>
						<view class="info flexbox" v-if="currentIdx == index">
							<view><text class="ys1">能量树：</text>{{item.profit}}</view>
							<view><text class="ys1">周期：</text>{{item.cycle}}</view>
							<view><text class="ys1">总产：</text>{{item.total_output}}</view>
						</view>
					</view> 
				</div>
			</div>
			<view class="loading">{{loadingText}}</view>
		</view>
	</view>
</template>

2:js中

<script>
	export default {
		data() {
			return {
				list: [],
				currentIdx: -1,
				page: 0,
				loadingText: "正在加载中",
			}
		},
		onShow() {
			const that = this;
			setTimeout(function() {
				that.loadData();
			}, 1000);
			// uni.startPullDownRefresh();
		},
		onReachBottom() {
			const that = this;
			that.loadData();
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			const that = this;
			that.page = 0;
			that.list = [];
			that.loadingText = "~~~~~~加载中~~~~~~";
			setTimeout(function() {
				that.loadData();
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			// 点击查看，显示树的信息
			showToggle(index) {
				if (this.currentIdx == index) {
					return this.currentIdx = -1;
				} else {
					return this.currentIdx = index;
				}
			},
			loadData() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				const that = this;
				let list = [];
				that.page++;
				this.$http.treendex({
					uuid: , // 接口需要的uuid
					page: that.page,// 页码
					limit: 6  //每页的条数
				}).then((res) => {
						// 以下部分滞留一种方式就可以，具体情况具体分析，因为我的返回的事空对象，我用的第一种
					// 如果返回来的是空对象 ，显示这个，如果不是 进行数据的加载  第一种  
					if (JSON.stringify(res.data.list) === '{}') {
						that.loadingText = "————我是有底线的————";
						return false;
					}
					// 如果返回来的是空数组 ，显示这个，如果不是 进行数据的加载   第二种
					if (res.data.list.length == 0 ) {
						that.loadingText = "————我是有底线的————";
						return false;
					}
					for (let i = 0; i < res.data.list.length; i++) {
						list.push(res.data.list[i]);
					};
					that.list = that.list.concat(list);
					that.loadingText = "~~~~~~加载中~~~~~~";
				}).catch((err) => {
					console.log('request fail', err);
				})
				setTimeout(function() {
					uni.hideLoading();
				}, 500);
			},
		},
	}
</script>

2:css中

	<style scoped>
	
	/**********列表内容***********/
	.energy .content {
	  padding-bottom: 150rpx;
	 
	}
	/****列表内容****/
	.energy .content .box {
	  padding: 20rpx 30rpx;
	  margin: 0px 30rpx;
	  margin-bottom: 30px;
	  margin-top: 30px;
	  border-radius: 10rpx;
	  border: 1rpx solid red;
	}
	.energy .content .box .flexbox {
	  border-radius: 10rpx;
	  justify-content: space-between;
	}
	.energy .content .box .ys1 {
	  color: #999;
	}
	.energy .content .box .ys2 {
	  color: #333;
	}
	.energy .content .box .mglow {
	  margin-top: -12rpx;
	}
	
	.energy .content .box .info {
	  margin-top: 20rpx;
	  color: #333;
	  font-size: 36rpx;
	}
	/*图片部分*/
	.energy .content .box .picleft {
	  width: 260rpx;
	  height: 160rpx;
	}
	.energy .content .box .picleft .pic {
	  width: 100%;
	  height: 100%;
	}
	/*文字信息部分*/
	.energy .content .box .txtright {
	  color: #fff;
	  width: 50%;
	  text-align: center;
	}
	.energy .content .box .txtright .title {
	  color: #048334;
	  font-size: 32rpx;
	  margin-bottom: 7px;
	}
	.energy .content .box .txtright .number {
	  color: #999;
	  font-size: 36rpx;
	}
	/*兑换按钮**/
	.energy .content .box .txtright .duibtn {
	  margin-top: 10rpx;
	  background: #fff;
	  color: #048334;
	  border-radius: 10rpx;
	  padding: 10rpx 20rpx;
	}
	/***加载更多****/
	.energy .content .loading {
	  color: #333;
	  text-align: center;
	}
</style>

后台返回的数据

返回的是空对象