HBuilder mui 上拉加载
mui的上拉加载实现比较简单,检测5+ runtime提供的滚动条滚动到底事件(plusscrollbottom),显示“正在加载”提示-->开始加载业务数据-->隐藏"正在加载"提示。使用方式类似下拉刷新,首先、通过mui.init方法中pullRefresh参数配置上拉加载各项参数,如下:
mui.init({
pullRefresh : {
container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up : {
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
其次,根据具体业务编写加载函数,需要注意的是,加载完新数据后,需要执行endPullupToRefresh()方法;
function pullfresh-function() {
//业务逻辑代码,比如通过ajax从服务器获取新数据;
......
//注意,加载完新数据后,必须执行如下代码,true表示没有更多数据了,两个注意事项:
//1、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
//2、注意this的作用域,若存在匿名函数,需将this复制后使用,参考hello mui中的代码示例;
this.endPullupToRefresh(true|false);
}
注意:
因为使用的是滚动到底事件,因此若当前页面内容过少,没有滚动条的话,就不会触发上拉加载
多次上拉加载后,若已没有更多数据可加载时,调用this.endPullupToRefresh(true);,之后滚动条滚动到底时,将不再显示“上拉显示更多”的提示语,而显示“没有更多数据了”的提示语;
若实际业务中,有重新触发上拉加载的需求(比如当前类别已无更多数据,但切换到另外一个类别后,应支持继续上拉加载),此时调用上拉加载的重置函数即可,如下代码:
//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().refresh(true);
热文精选
更多资讯推荐
更多- Stable Diffusion 2.0 发布,加强成人内容过滤
- .NET 7 正式发布
- A3Mall 开源商城系统 v2.1 发布
- FydeOS v14 版本更新:优化输入法体验+重构安卓子系统+全新应用启动器
- ThinkPHP V6.0.8版本发布——多环境变量配置支持
- 毕昇 JDK 8u292、11.0.11 发布!
- KubeVela 1.0:开启可编程式应用平台的未来
- Eclipse 4.19 稳定版发布
- 阿里巴巴 Arthas 3.5.0 版本发布,支持反编译打印行号和统一鉴权
- Debian 11 Bullseye 即将进入冻结,Debian 13 代号 Trixie
- Rancher 2.5 发布,新增支持边缘集群的 GitOps
- FlashDB IoT 超轻量级嵌入式数据库