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

1、需要引入的css、js

<link rel="stylesheet" href="common/mui/css/mui.min.css">

<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');
//注意:此处属于异步获取DOM
在列表中的所有事件应放在此处,防止dom节点获取失败。
                 $(".buytap").on("tap",function(){
var index = $(this).find(".buybtnid").text();
shop(index);
})
            }
}
); }
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function () {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //参数为true代表没有更多数据了。
data();
}, 1500);
}
})();

5、踩的坑

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

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

mui上拉加载的更多相关文章

  1. mui 上拉加载更多的使用

    最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑 ...

  2. mui 上拉加载 实现分页加载功能

    mui 上拉加载 实现分页加载功能,效果图: 分页功能(上拉加载): 1.引入需要的css.js文件 <link href="static/css/mui.css" rel= ...

  3. jquery 和 mui 上拉加载

    jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...

  4. mui 上拉加载更多

    看起来很简单的东西,实践过程中还是出现了很多麻烦,比如上拉时,状态条跑到了顶部,因为内容没有添加到容器中,再比如下拉的回调函数使用问题,this的传递. html实现部分: <div class ...

  5. MUI - 上拉加载不执行

    mui('#pullrefresh').pullRefresh().refresh(true); if($(".list-item").length == countDataSum ...

  6. mui 上拉加载

    最近做到移动端页面的开发,需要mui 的上拉刷新功能,最后实现后整理代码如下: 1.需要引入的js <link href="../resource/css/mui.min.css&qu ...

  7. MUI上拉加载下拉刷新

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. mui上拉加载会影响页面中的某些点击事件

    项目是vue写的(移动端) <div class="mui-scroll"> <a :href="bannerinfo.activity_url&quo ...

  9. mui的上拉加载更多 下拉刷新 自己封装的demo

    ----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...

随机推荐

  1. MongoDBDao 工具类(包含分页取数据)

    mongdb工具类 package e16wifi.statistic.com.mongodb; import java.util.ArrayList; import java.util.List; ...

  2. Stars_树状数组

    Problem Description Astronomers often examine star maps where stars are represented by points on a p ...

  3. UITableViewCell 自适应高度 ios8特性

    这篇文章介绍了在一个动态数据的 table view 中,cell 根据 text view 内容的输入实时改变 cell 和 table view 的高度.自动计算 cell 高度的功能使用 iOS ...

  4. I.MX6 mfgtool2-android-mx6q-sabresd-emmc.vbs hacking

    /******************************************************************** * I.MX6 mfgtool2-android-mx6q- ...

  5. Chapter9:顺序容器

    现代C++程序应该使用标准库容器,而不是更原始的数据结构,例如内置数组. 新标准库容器的性能几乎肯定与最精心优化过的同类数据结构一样好. 当我们用一个对象来初始化容器时,或将一个对象插入到容器中时,实 ...

  6. ThinkPHP3.2.3验证码显示、刷新、校验

    显示验证码 首先在Home/Controller下创建一个公共控制器PublicController <?php namespace Home\Controller; use Think\Con ...

  7. android binder机制详解

    摘要 Binder是android中一个很重要且很复杂的概念,它在系统的整体运作中发挥着极其重要的作用,不过本文并不打算从深层次分析Binder机制,有两点原因:1是目前网上已经有2篇很好的文章了,2 ...

  8. springboot2.0 JPA配置自定义repository,并作为基类BaseRepository使用

    springboot2.0 JPA配置自定义repository,并作为基类BaseRepository使用 原文链接:https://www.cnblogs.com/blog5277/p/10661 ...

  9. LeetCode——17. Letter Combinations of a Phone Number

    一.题目链接: https://leetcode.com/problems/letter-combinations-of-a-phone-number/ 二.题目大意: 给定一段数字字符串,其中每个数 ...

  10. irc 关键操作

    IRC 客户端: Textual 5 HexChat  IRC 用户密码常用命令: 用户密码: 忘记密码 如果太长时间没登录IRC,难免会忘记密码,那IRC有重置密码的功能吗?当然有,不过也是通过命令 ...