GraceUI 下拉刷新组件 [ 滚动区域模拟模式 ]

下拉刷新在日常开发中是极其常见的场景，但 uni-app 或小程序提供的刷新方案有着位置固定、样式不可修改、不能配合自定义导航使用等诸多缺点。
GraceUI 下拉刷新组件通过与滚动区域的组合，模拟实现了下拉刷新，解决了上面提到的多个不足。

刷新组件实现原理

1. 监听滚动区域的滚动数据及手指滑动数据
2. 根据滚动位置、手指滑动数据判断是否进行刷新
3. 刷新组件激活 reload 事件
4. 在页面上执行 reload 事件
5. 刷新完成后关闭刷新动画

刷新组件属性

// 刷新过程中的提示文本
reloadTxt    : {
	type : Array,
	default : function(){
		return ['松开手指开始刷新', '数据刷新中', '数据已经刷新']
	}
}
// 刷新过程中组件的背景颜色 [ 准备刷新, 刷新中, 刷新完成 ]
reloadBgColor : {
	type : Array,
	default : function(){
		return ['', '', '#63D2BC']
	}
}
// 刷新过程中组件的文本颜色 [ 准备刷新, 刷新中, 刷新完成 ]
reloadColor : {
	type : Array,
	default : function(){
		return ['#999999', '#63D2BC', '#FFFFFF']
	}
}
// 组件宽度
width : { type : String, default:'750rpx'}
// 组件左侧间距
marginLeft : { type : String, default:'0rpx'}

演示代码