使用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 有用的脚本函数
May 07 Javascript
Prototype Class对象学习
Jul 19 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
js字符串倒序的实例代码
Nov 30 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
JavaScript库 开发规则
2009/01/31 Javascript
Javascript 二维数组
2009/11/26 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
JavaScript基础语法之js表达式
2016/06/07 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
Python二分查找详解
2015/09/13 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Django 重写用户模型的实现
2019/07/29 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python tcp传输代码实例解析
2020/03/18 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
装饰活动策划方案
2014/02/11 职场文书
品质主管岗位职责
2014/03/16 职场文书
幼儿园招生广告
2014/03/19 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis