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 相关文章推荐
JavaScript中的prototype使用说明
Apr 13 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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如何调用webservice应用介绍
2012/11/24 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
50行Python代码实现人脸检测功能
2018/01/23 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
英语教师岗位职责
2014/03/16 职场文书
婚前协议书怎么写
2014/04/15 职场文书
租车协议书范本
2014/04/22 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
贫困证明书范文
2015/06/16 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
利用Redis实现点赞功能的示例代码
2022/06/28 Redis