手册版本 V6.0

相关说明

本示例使用页面组件 ( gui-page ) 完成下拉刷新工作，注意事项 : 
01. 非 nvue页面将使用 滚动区域 作为主体 ( 高度自动铺满屏幕 )、利用手指事件来实现下拉刷新 [ 页面不会产生滚动所以不会产生页面滚动事件 ]；
02. nvue 页面将使用 list 组件作为主体 ( 高度自动铺满屏幕 )、利用 list 内置刷新组件实现下拉刷新 [ 页面不会产生滚动所以不会产生页面滚动事件 ]；
03. 不适合全屏选项卡形式的刷新，如需实现全屏选项卡形式的刷新请点击手册左侧 [ 切换布局 > 全屏选项卡 ] 查看解决方案；
04. 内部使用了 gui-refresh 组件，自动完成手指触屏事件绑定使用更加方便；
04. 您也可以使用 gui-refresh 组件 + 滚动区域在不使用 gui-pape 组件的情况下实现自定义刷新；

组件名称

gui-refresh : GraceUI 组件目录/gui-refresh

兼容平台

组件属性

事件绑定

01. 使用 gui-refresh 组件 + 滚动区域实现下拉刷新时，需要将滚动区域的手指事件传递给 gui-refresh 组件，
01. touchstart() 参数 : 滚动区域 touchstart 事件的返回数据;
02. touchmove() 参数 : 滚动区域 touchmove 事件的返回数据;
03. touchend() 参数 : 滚动区域 touchend 事件的返回数据;
以上数据使用 gui-page 组件来实现刷新时组件已经自动处理，自定义模式请请参考自定义模式代码；

组件函数

endload : 用于停止组件的加载动画并关闭加载组件；

组件事件

reload : 组件展示加载时触发，可以触发事件时完成刷新业务逻辑；

注意事项

01. 利用 gui-page 组件实现下拉刷新， 属性全部添加到 gui-page 组件上；
02. gui-page 组件添加 :refresh="true" 属性开启下拉刷新；
03. gui-page 组件添加 @reload="reload" 事件监听、实现下拉刷新数据刷新逻辑；
04. gui-page 组件添加 @scroll="bodyScroll" 可以监听滚动区域滚动事件及滚动值；

演示代码