使用MUI框架模拟手机端的下拉刷新和上拉加载功能


Posted in Javascript onSeptember 04, 2017

mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。

套用mui官方文档的一句话:“开发者只需关心业务逻辑,实现加载更多数据即可”。真的是不错的框架。

想更多的了解这个框架:http://dev.dcloud.net.cn/mui/

那么如何实现下拉刷新,上拉加载的功能呢?

首先需要一个容器:

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">

<!--数据列表-->


<ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>

</div>
</div>

然后进行初始化操作,通过mui.init方法中pullRefresh参数配置上拉加载各项参数:

mui.init({
 pullRefresh : {
 container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
 up : {
 height:50,//可选.默认50.触发上拉加载拖动距离
 auto:true,//可选,默认false.自动上拉加载一次
 contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
 contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
 callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
 }
 }
});

这里重点关注callback参数项,为必选内容,里边写刷新函数,根据具体的业务来写,在实际项目中,通常是通过ajax从服务器获取数据,然后进行html的动态拼接,形成数据项。

下面举一个很简单的例子:(实现上拉加载的功能)

容器:

<!--下拉刷新容器-->
 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">

<!--数据列表-->
 

<ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>

</div>
 </div>

一会要将数据放到 id=“testUl”的ul标签下,id当然随便取

调用mui.init方法:

<script type="text/javascript">
 mui.init({
  pullRefresh : {
   container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
   up : {
    height:50,//可选.默认50.触发上拉加载拖动距离
    auto:true,//可选,默认false.自动上拉加载一次
    contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
    contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
    callback: function () {//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
     /*每次加载动态的添加一个li*/
     $("#testUl").append($("<li>" + new Date() + "</li>"));
     this.endPullupToRefresh(false);
    } 
    }
    }
    });
</script>

callback参数中,写的是加载函数,每次加载,动态生成一个li标签,用当前时间作为测试数据,贴到id=testUl的ul标签之下。

这里注意callback中的function最后的 this.endPullupToRefresh(false); 表示结束加载,参数可选true或false,true表示结束加载,false继续加载,在实际项目应用中,通常要根据服务器回传的数据量做一下判断。

over!! 这样每次上拉,都会加载一条当前的时间。

总结

以上所述是小编给大家介绍的使用MUI框架模拟手机端的下拉刷新和上拉加载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 #Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 #Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 #Javascript
vue中component组件的props使用详解
Sep 04 #Javascript
React-Native中props具体使用详解
Sep 04 #Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 #Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 #Javascript
You might like
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
python中list常用操作实例详解
2015/06/03 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python list格式数据excel导出方法
2018/10/31 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python 利用toapi库自动生成api
2020/10/19 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
消防器材管理制度
2014/01/28 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
诚信考试倡议书
2014/04/15 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
医院护士工作检讨书
2014/10/26 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
诚实守信主题班会
2015/08/13 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
python playwright之元素定位示例详解
2022/07/23 Python