uni-app的开发可以实现多个平台的小程序同步进行且代码量大幅度减少，那么uni-app开发中关于下拉刷新、上拉加载更多效果要怎么配置呢？开始之前，先来了解下拉刷新、上拉加载更多具体使什么样的一个效果？

    下拉刷新：页面下拉时，刷新整个页面或部分区域的数据。即添加监听用户下拉动作，从新请求全部或部分数据。

    上拉加载更多：用户向上滑动页面，页面触底时触发数据请求，将新请求的数据展示给用户。

    uni-app官网文档地址：pages.json配置说明-点击进入

从上面了解了关于下拉刷新和上拉加载更多的具体含义，接下来开始在uni-app中实现效果。

一、页面下拉刷新

    1.1、pages.json文件中的配置，即enablePullDownRefresh为true。

"pages": [ 
	{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
			"enablePullDownRefresh":true//下拉刷新，必须配置该参数
		}
	}
]

 注：这里即首页的配置，若你需要其余页面也添加下拉刷新功能。那么其余页面同理添加enablePullDownRefresh即可。

    1.2、具体下拉刷新中，页面代码的配置。

export default {
	data() {
		return {}
	},
	onLoad(e) {},
	methods: {},
	//下拉刷新
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}

    1.3、启动下拉刷新，进行关闭。

uni.stopPullDownRefresh();

二、上拉加载更多效果

    2.1、页面中上拉监听

export default {
	data() {
		return {}
	},
	onLoad(e) {},
	methods: {},
	//上拉加载更多
	onReachBottom() {
		console.log("上拉加载更多")
	},
}

注：默认是下拉距离底部50px时，开始触发onReachBottom方法，在方法中开始调用下一页的数据。关于触底距离配置，可以向下继续查看如何配置？

    2.2、上拉加载更多效果的定义

原生中式没有上拉加载更多的动画效果，该部分动画效果需自行进行定义。

    2.3、下拉距离触底的配置

"pages": [ 
	{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
			"enablePullDownRefresh":true,//下拉刷新，必须配置该参数
                        "onReachBottomDistance":100
		}
	}
]

注：onReachBottomDistance单位默认为px,目前也仅支持px。但你在这里配置时，不需要写单位。直接填写数字即可。