使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。
来源:互联网 发布:程序员进阶之路 编辑:程序博客网 时间:2024/06/04 17:41
套用mui官方文档的一句话:“开发者只需关心业务逻辑,实现加载更多数据即可”。真的是不错的框架。
想更多的了解这个框架:http://dev.dcloud.net.cn/mui/
那么如何实现下拉刷新,上拉加载的功能呢?
首先需要一个容器:
1 <!--下拉刷新容器-->2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">3 <div class="mui-scroll">4 <!--数据列表-->5 <ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>6 </div>7 </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的动态拼接,形成数据项。
下面举一个很简单的例子:(实现上拉加载的功能)
容器:
1 1 <!--下拉刷新容器-->2 2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">3 3 <div class="mui-scroll">4 4 <!--数据列表-->5 5 <ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>6 6 </div>7 7 </div>
一会要将数据放到 id=“testUl”的ul标签下,id当然随便取
调用mui.init方法:
1 <script type="text/javascript"> 2 mui.init({ 3 pullRefresh : { 4 container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等 5 up : { 6 height:50,//可选.默认50.触发上拉加载拖动距离 7 auto:true,//可选,默认false.自动上拉加载一次 8 contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容 9 contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;10 callback: function () {//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;11 12 /*每次加载动态的添加一个li*/13 $("#testUl").append($("<li>" + new Date() + "</li>"));14 15 this.endPullupToRefresh(false);16 } 17 }18 }19 });20 </script>
callback参数中,写的是加载函数,每次加载,动态生成一个li标签,用当前时间作为测试数据,贴到id=testUl的ul标签之下。
这里注意callback中的function最后的 this.endPullupToRefresh(false);表示结束加载,参数可选true或false,true表示结束加载,false继续加载,在实际项目应用中,通常要根据服务器回传的数据量做一下判断。
over!! 这样每次上拉,都会加载一条当前的时间。
阅读全文
0 0
- 使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。
- mui的上拉刷新 下拉加载
- MUI框架学习之[Ajax][下拉刷新][上拉加载]
- mui 下拉刷新 上拉加载
- mui下拉刷新和上拉加载
- MUI上拉加载下拉刷新
- mui 上拉刷新下拉加载
- MUI 上拉加载,下拉刷新
- mui上拉刷新下拉加载
- MUI上拉加载,下拉刷新
- mui的上拉加载下拉刷新的实现
- mui框架下拉刷新上拉加载,click事件无效的解决方法
- 手机端的下拉刷新和上拉加载
- mui下拉加载、上拉刷新(包括分页,vue.js)
- MUI下拉刷新和上拉加载功能
- mui 双webview的上拉加载和下拉刷新和poppicker一起时候使用的问题以及解决
- 使用XListView框架进行上拉加载和下拉刷新
- 关于pulltorefresh框架使用 下拉刷新、 上拉加载
- chrome格式化json串( jsonView插件安装)
- hibernate--一级缓存_二级缓存_查询缓存(面试)
- Java 内存区域和GC机制详解解读
- Java8的十大新特性
- laravel数据库数量加减
- 使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。
- java io 节点流和处理流
- Mysql5.7新特性(学习笔记)
- java读取properties文件的快捷方法
- 彻底搞懂jQuery.stop()函数
- 项目——通过自动回复机器人学Mybatis(深入解析拦截器源码)(八)
- ApiDemos学习知识点之media-MediaPlayerDemo(12)
- Android图片缓存之Bitmap详解
- 文件操作 StreamReader()和TextReader()