使用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 相关文章推荐
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
Vue实现左右菜单联动实现代码
Aug 12 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
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
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
优秀班集体获奖感言
2014/02/03 职场文书
环境整治工作方案
2014/05/18 职场文书
模具专业自荐信
2014/05/29 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
python实现高效的遗传算法
2021/04/07 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android