uniapp+uview1：原生列表加载，下拉刷新，上拉加载

其实，用uniapp已经4年了，写了挺多个小程序，app，我始终坚定，原生的就是最好的，比如原生的导航栏，原生的预览图片，原生的下拉刷新，上拉加载。。。拒绝花里胡哨！

之所以写这篇文章是因为，我在uview的交流群里面看到，有相当一部分人关于列表加载这里的处理，处理方式写的很乱，可能上一个列表用一种方法，下个列表就换另一种方式了，我在这里奉上自己多年的列表处理方式，以供参考。。。

1. pages.json里面，我们需要去配置当前页面 下拉刷新，上拉加载的一些配置

"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "index",
		"enablePullDownRefresh": true,
		"onReachBottomDistance": 100
}

2. 页面如何写，我先说说我的做法啊；

1.进入页面，首先我们当然是需要请求接口获取列表，但是这个是有时间的，所以为了提升用户体验，我们先去展示loading图；

2.待响应完成后，再展示我们的列表，如果列表为空，那么我们就去直接展示一个空列表占位图，告诉用户，我这里没数据

3.如果有数据，那就展示我们的列表

先来模拟一个请求的数据吧 list.js

let result = {
	"code": 200,
	"msg": "操作成功",
	"data": [{
			"id": 1,
			"name": "联想"
		}, {
			"id": 2,
			"name": "苹果"
		}, {
			"id": 3,
			"name": "索尼"
		}, {
			"id": 4,
			"name": "华硕"
		}, {
			"id": 5,
			"name": "ThinkPad"
		}, {
			"id": 6,
			"name": "惠普HP"
		}, {
			"id": 7,
			"name": "戴尔 DELL"
		}, {
			"id": 8,
			"name": "宏碁Acer"
		}, {
			"id": 9,
			"name": "神舟 Hasee"
		},
		{
			"id": 10,
			"name": "三星SAMSUNG"
		}
	]
}

export function httpList(params) {
	console.log(params)
	// 假设到第五页的时候，没数据了，返回了空数组
	return new Promise((resolve, reject) => {
		if (params.pageNum === 5) {
			resolve({
				code: 200,
				msg: '操作成功',
				data: []
			})
		} else {
			setTimeout(() => {
				resolve(result)
			}, 300)
		}
	})
}

index.vue

<template>
	<view>
		<view class="" v-if="loading">loading...</view>
		<template v-else>
			<view v-if="list.length > 0">
				<view class="item" v-for="(item, index) in list" :key="index">{{ `${index + 1}--${item.name}` }}</view>
				<u-loadmore :status="status" />
			</view>
			<view v-else><u-empty text="所谓伊人，在水一方" mode="list"></u-empty></view>
		</template>
	</view>
</template>

<script>
import { httpList } from './list.js';
export default {
	data() {
		return {
			// 请求参数
			params: {
				pageNum: 1,
				pageSize: 10
			},
			status: 'loadmore', //控制上拉加载的状态
			loading: true, //控制在响应回来前展示loading加载
			list: [] //要展示的列表
		};
	},
	onLoad() {
		this.getList(); //获取列表
	},
	// 下拉刷新
	onPullDownRefresh() {
        this.status = 'loadmore';
		this.params.pageNum = 1;
		this.getList();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 上拉加载
	onReachBottom() {
		if (this.status !== 'nomore') {
			this.status = 'loading';
			this.params.pageNum++;
			this.getList();
		}
	},
	methods: {
		// 获取列表
		async getList() {
			const resp = await httpList(this.params);
			if (resp.code === 200) {
				let { pageNum, pageSize } = this.params;
				let { data } = resp;
				if (data.length < pageSize) this.status = 'nomore'; //如果响应值列表的长度小于我们所请求的页数 那就意味已经没有下一页了
				if (pageNum === 1) this.list = data;
				//如果pagenum是第一页，直接赋值
				else this.list = [...this.list, ...data]; //不是第一页 将原数组和得到的数组进行合并
			}
			if (this.loading) {
				setTimeout(() => {
					this.loading = false;
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.item {
	height: 150rpx;
	border-bottom: solid 1px #19be6b;
}
</style>

展示效果：

列表加载展示效果

大概就是这个样子，有点丑，多多包涵，可以参考一下！

如果需求 是必须用到自定义的，在微信小程序多一点，很多老板认为微信下拉刷新的三个点很丑。。。那么我也推荐一个 mescroll-uni

插件市场地址：【wxs+renderjs实现】高性能的下拉刷新上拉加载组件 - DCloud 插件市场

官网地址：mescroll -- 精致的下拉刷新和上拉加载js框架