本示例使用页面组件 ( gui-page ) 完成加载更多工作,注意事项 :
01. 页面将使用 滚动区域 [ vue ] / list [ mvue ] 作为主体 ( 高度自动铺满屏幕 )、利用滚动区域触底事件来触发加载;
02. 不适合全屏选项卡形式的加载,如需实现全屏选项卡形式的刷新请点击手册左侧发现解决方案;
03. 内部使用了 gui-loadmore 组件;
04. 您也可以使用 gui-loadmore 组件 在不使用 gui-pape 组件的情况下实现各种模式的加载更多;
gui-loadmore : GraceUI 组件目录/gui-loadmore.vue
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
属性名称 | 类型 | 默认值 | 作用 |
loadMoreText | Array | ['','更多数据加载中', '已加载全部数据','暂无数据'] | 加载过程中展示的文本 |
customClass | Array | ['gui-color-gray'] | 加载组件自定义样式 |
loadMoreFontSize | String | 26rpx | 组件文本尺寸 |
status | Number | 0 | 初始化加载状态 0 准备加载 1 加载中 2 加载到底 3 为空展示 |
01. loading() 开启加载动画,用于加载过程;
02. stoploadmore() 停止加载动画,准备下一次加载;
03. nomore() 加载到底,不能进行下一次加载;
04. empty() 第一次加载数据为空,不能进行下一次加载;
05. hide() 关闭组件;
@tapme : 组件被点击时触发给父级;
01. 利用 gui-page 组件实现加载更多, 属性全部添加到 gui-page 组件上;
02. gui-page 组件添加 :loadmore="true" 属性开启加载更多;
03. gui-page 组件添加 @loadmorefun="getdata" 事件监听、实现数据加载逻辑;