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 无限级联菜单案例分享
Mar 26 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
小程序server请求微信服务器超时的解决方法
May 21 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
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
php7 新增功能实例总结
2020/05/25 PHP
javascript Object与Function使用
2010/01/11 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
js初始化验证实例详解
2016/11/26 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
微信小程序实现弹框效果
2020/05/26 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
详解python中的 is 操作符
2017/12/26 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
大学生毕业鉴定
2014/01/31 职场文书
分公司负责人任命书
2014/06/04 职场文书
入党政审材料范文
2014/12/24 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
redis实现的四种常见限流策略
2021/06/18 Redis
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技