uniapp实现上拉刷新，下拉加载

上拉刷新，下拉加载这个功能实际上在我们的应用当中使用范围是很广的，比如说商城中心在展示商品的时候就可以使用下拉加载这样的功能，那么如何实现呢？

首先遇到这个功能我就去搜插件市场了。经过我下载了不少的插件，我发现了一个非常不错的插件。
插件地址：
https://ext.dcloud.net.cn/plugin?id=343
官网地址：
http://www.mescroll.com/uni.html#load
这个官网里面的示例和讲解是非常清楚的，通过示例我们可以照着实现这个功能。

刷新的示例代码：

在项目中使用：

// An highlighted block
template部分：
<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<mescroll-uni top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick" @init="mescrollInit">
			<!-- 数据列表 -->
			<pd-list :list="pdList"></pd-list>
		</mescroll-uni>
script部分：
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import PdList from "@/components/other/pd-list.vue";
	import mockData from "@/common/pdlist.js"; // 模拟数据
	
	export default {
   
		components: {
   
			MescrollUni,
			PdList
		},
		data() {
   
			return {
   
				mescroll: null, //mescroll实例对象
				downOption:{
   
					auto:false, // 不自动加载
				},
				upOption:{
   
					auto:false, // 不自动加载
					// page: {
   
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
   
						tip: '~ 空空如也 ~', // 提示
						btnText: '去看看'
					}
				}