GraceUI 组件精细化更新工作进行中~ 如果您在使用时发现组件或样式不生效时,请先进行重新编译,重新编译后依然无效请升级您的 GraceUI 框架版本 ( 网站头部点击下载按钮获取最新版本 )即可! 此次更新预计持续到 2020-01-30 ~
下拉刷新在日常开发中是极其常见的场景,但 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'}
演示代码