MUI进行APP混合开发实现下拉刷新和上拉加载 原创
时间:2022-07-28
本文章向大家介绍MUI进行APP混合开发实现下拉刷新和上拉加载 原创,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
首先,我们的环境是使用HBuilder通过MUI开发APP,这种混合开发适合安卓和苹果两个平台,本次我们给大家写的代码是把上拉加载和下拉刷新单独分离开,一起来学习下。
为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); 通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画;在iOS平台,H5的动画已经比较流畅,故依然使用H5方案。两个平台实现虽有差异,但经过封装,可使用一套代码实现下拉刷新。
第一步: 创建子页面,因为拖动的其实是个子页面的整体
mui.init({
subpages:[{
url:pullrefresh-subpage-url,//下拉刷新内容页面地址
id:pullrefresh-subpage-id,//内容页面标志
styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算,若使用标准mui导航,顶部默认为48px; .....//其它参数定义
}
}]
});
第二步:内容页面需按照如下DOM结构构建
<!--下拉刷新容器--
<div id="pullrefresh" class="mui-content mui-scroll-wrapper"
<div class="mui-scroll"
<!--数据列表--
<ul class="mui-table-view mui-table-view-chevron"
<li class="mui-table-view-cell" 1</li
</ul
</div
</div
第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数
mui.init({
pullRefresh : {
container:"#pullrefresh",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down : {
contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback : fn //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
} }
});
第四步:设置执行函数
function fn() {
//业务逻辑代码,比如通过ajax从服务器获取新数据; ...... //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //这行代码会隐藏掉 正在加载... 容器
}
以上就是关于下拉刷新的MUI写法以及相关的function 函数,下面来看看下拉加载:
第一步,第二步 和下拉刷新的一样
第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数
mui.init({
pullRefresh : {
container:"#pullrefresh",//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up : {
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback : fn //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
第四步:设置执行函数
function fn() {
//业务逻辑代码,比如通过ajax从服务器获取新数据; ...... //注意,加载完新数据后,必须执行如下代码,true表示没有更多数据了,
两个注意事项: //1、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后 //
2、注意this的作用域,若存在匿名函数,需将this复制后使用
var _this = this;
_this.endPullupToRefresh(true|false);
}
上面就是上拉加载这个代码的详细写法以及函数。
本次我们分开给大家把下拉刷新和上拉加载都给大家分享了,如果有任何不明白了地方,可以在下面的留言地方留言讨论。
- Mac上提升python运算速度-PyPy初体验
- python处理json数据(复杂的json转化成嵌套字典并处理)
- Pointer-network理论及tensorflow实战
- python3 log文件处理获取某天需要的数据
- 实战深度强化学习DQN-理论和实践
- Python 工匠:编写条件分支代码的技巧
- python3 下 Zabbix监控调用graph.get并且下载监控图
- 用R语言复盘美国总统大选结果~
- 最新Apache Spark平台的NLP库,助你轻松搞定自然语言处理任务
- 使用Seq2Seq+attention实现简单的Chatbot
- R语言可视化——用ggplot构造期待已久的雷达图
- 【实战】最新Deep Learning with Keras图书加代码,教你从零开发一个复杂深度学习模型(附下载)
- 基于zabbix 自动抓取每天监控数据!/usr/local/python/bin/python3.5
- 大过年的,一起来用Seq2Seq来作对联吧!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Leetcode刷题 206. 反转链表 递归迭代两种方法实现
- airtest本地连接和远程连接
- Flutter基础widgets教程-TextField篇
- poco对象生成的几种方式根据你使用不同的ui决定
- java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL
- SpringMVC系列之SpringMVC快速入门 MVC设计模式介绍+什么是SpringMVC+ SpringMVC的作用及其基本使用+组件解析+注解解析
- [Go] GoAdminGroup/go-admin的安装和运行
- 算法篇:滑动窗口(一)
- PHP代码审计02之filter_var()函数缺陷
- Flutter基础widgets教程-Tooltip篇
- 08 . Jenkins之SpringCloud微服务+Vue+Docker持续集成
- Spark 模型选择和调参
- Spark Parquet详解
- Spark 频繁模式挖掘
- Flutter基础widgets教程-WidgetsApp篇