本示例使用页面组件 ( gui-page ) 完成加载更多工作,注意事项 :
01. 页面将使用 滚动区域 作为主体 ( 高度自动铺满屏幕 )、利用滚动区域触底事件来触发加载;
02. 不适合全屏选项卡形式的加载,如需实现全屏选项卡形式的刷新请点击手册左侧发现解决方案;
03. 内部使用了 gui-loadmore 组件;
04. 您也可以使用 gui-loadmore 组件 在不使用 gui-pape 组件的情况下实现各种模式的加载更多;
此组件最近一次更新时间 : 2021-02-23 12:15 ,请保证您的框架版本更新。
gui-loadmore : /graceUI/组件目录/gui-loadmore
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
属性名称 | 类型 | 默认值 | 作用 |
loadMoreText | Array | ['','更多数据加载中', '已加载全部数据','暂无数据'] | 加载过程中展示的文本 |
loadMoreColor | Array | ['rgba(69, 90, 100, 0.6)', 'rgba(69, 90, 100, 0.6)', 'rgba(69, 90, 100, 0.8)', 'rgba(69, 90, 100, 0.6)'] | 加载过程中组件的文本颜色 |
loadMoreFontSize | String | 26rpx | 组件文本尺寸 |
status 2021.02.20 新增 | 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" 事件监听、实现数据加载逻辑;