mui上拉加载功能实例详解


Posted in Javascript onApril 13, 2017

最近在做移动端的项目,用到了mui的上拉加载,整理如下:

1、需要引入的css、js

<link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" >
<script src="js/jquery-3.2.0.min.js"></script>
<script src="common/mui/js/mui.min.js"></script>

2、静态页的dom结构

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" class="maincon">
<div class="mui-scroll">
<div class="mui-table-view mui-table-view-chevron">
</div>
</div>
</div>

3、静态页面 js对应的代码

<script type="text/javascript">
(function(){
//上拉加载下拉刷新
mui.init({
pullRefresh: {

container: '#pullrefresh',

up: {


contentrefresh: '正在加载...',


callback: pullupRefresh


}

}
});
//加载更多
var dataNum=12;//获取数据总数
var pageSize=3;//每页显示条数
var counter=1;//计数器
var pageStart=0;//开始数据条数
getData(pageStart,pageSize);
function getData(pageStart,pageSize){
//显示数不足每页显示条数
if(dataNum-pageStart<pageSize){
pageSize=dataNum-pageStart;
data(pageStart,pageSize);
console.log("显示数不足每页显示条数");
}
//显示隐藏加载更多
else if(pageStart+pageSize>=dataNum){
data(pageStart,pageSize);
console.log("没有更多数据了");
//没有更多数据了
}else{
data(pageStart,pageSize);
console.log("显示dataNum"+dataNum+"pageSize"+pageSize+"pageStart"+pageStart);
//显示
}
}
function data(pageStart,pageSize){
//业务
var result="";
for(var i=pageStart;i<(pageStart+pageSize);i++){
result+='<div class="goode-msg">'+
'<div class="goods">'+
'<p class="goode-name">呜呜呜呜</p>'+
'<span class="goods-price">价格:10元</span>'+
'<span class="icon-golden"></span>'+
'<span class="goods-golden">送1111</span>'+
'</div>'+
'<div class="buycon">'+
'<a class="buybtn buybtnabled" onclick="shop(5)">立即购买</a>'+
'</div>'+
'</div>'
}
console.log(jQuery);
jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
var flag=counter++<(dataNum/pageSize)
console.log(dataNum/pageSize);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((!flag)); //参数为true代表没有更多数据了。
var scroll = document.body.querySelector('.mui-scroll .mui-table-view');
var item = document.body.querySelectorAll('.goode-msg');
console.log(counter);
if(flag){
console.log(counter);
pageStart=counter*pageSize;
data(pageStart,pageSize);
}
}, 1500);
}
})();
</script>

4、与服务端联调时 js做了改动,如下:

//加载更多
 var pageSize = 15;//每页显示条数
 var counter = 1;//计数器
 var pageStart = 0;//开始数据条数
 var Flag=true;
 data();
 function data() {
  //业务
  var result = "";
  $.ajax({
   type: 'post',
   url: '/xxx/xxx',
   async: false,
   dataType: "json",
   data: {page: counter},
   success: function (data) {
    Flag=data[0].dd==null||data[0].dd==undefined||data[0].dd=='';
//判断是否有返回值 当没有返回值的时候就为空,则代表没有更多数据了
    console.log(Flag);
    if(Flag==false){
     counter++;
    }
    $.each(data[0].dd, function (i, value) {
     result += '<div class="goode-msg">' +
       '<div class="goods">' +
       '<input type="hidden" class="id" value="'+value.id+'">' +
       '<input type="hidden" class="aa" value="'+value.aa+'">' +
       '<p class="goode-name" id="title'+value.id+'">'+value.title+'</p>' +
       '<input type="hidden" class="goods-price-cent" value="'+value.price.cent/100+'">' +
       '<span class="goods-price">价格:<b id="price'+value.id+'">'+value.price.cent/100+'</b>元</span>' +
       '<span class="icon-golden"></span>' +
       '<span class="goods-golden">送<b id="ss'+value.id+'">'+value.ss+'</b>ss</span>' +
       '</div>' +
       '<div class="buycon">' +
       '<a class="buybtn buybtnabled" onclick="shop('+i+')">立即购买</a>' +
       '</div>' +
       '</div>'
    });
    jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
   }
  }
 );
}
/**
 * 上拉加载具体业务实现
 */
function pullupRefresh() {
 setTimeout(function () {
  mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //参数为true代表没有更多数据了。
  data();
 }, 1500);
}
})();

5、踩的坑

注意:一定要先引入jquery、mui.js否则 js代码会不识别mui。

在jquery中,如果要给动态生成的节点绑定事件,以前要用live,现在用delegate或者on,原理是利用冒泡实现事件委托,也就是给生成节点的父节点预先绑定事件。

以上所述是小编给大家介绍的mui上拉加载功能实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 #Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 #Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 #Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 #Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 #Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 #Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 #Javascript
You might like
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
js不是基础的基础
2006/12/24 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
python os模块在系统管理中的应用
2020/06/22 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
毕业生教师求职信
2013/10/20 职场文书
一岗双责责任书
2014/04/15 职场文书
员工合理化建议书
2014/05/19 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2015年读书月活动总结
2015/03/26 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android