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 json 新手入门文档
Dec 03 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
原生js+canvas实现下雪效果
Aug 02 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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
iview实现图片上传功能
2020/06/29 Javascript
Python常用内置函数总结
2015/02/08 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Python中的两个内置模块介绍
2015/04/05 Python
python实现文件快照加密保护的方法
2015/06/30 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
应届生人事助理求职信
2013/11/09 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
面试复试通知单
2015/04/24 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
MySQL去除密码登录告警的方法
2022/04/20 MySQL