WEB开发者之混合开发APP（五）， 上拉加载

本文介绍2种方式的上拉加载实现。

1. mui的上拉加载

mui的上拉加载和下拉刷新类似，都属于pullRefresh插件，使用过程如下：

1、页面滚动到底，显示“正在加载...”提示（mui框架提供）

2、执行加载业务数据逻辑（开发者提供）

3、加载完毕，隐藏"正在加载"提示（mui框架提供）

1.1 相对固定的页面结构

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

1.2 初始化

mui.init({
    pullRefresh: {
        container: '#pullrefresh', //与div的id相同
        up: {                      //up 表示上拉
            auto:false,        //auto=false,表示页面加载不自动触发上拉。auto=true,触发。
            contentrefresh: '正在加载...',
            callback: search   //上拉触发的函数
        }
    }
});
var pageNum = 1; //从第一页开始

1.3 上拉触发的函数

function search(){  //下拉触发的函数
    var data = {
        "pageNum":pageNum //第几页
    };
    mui.post(orderListURL,data,function(data){
        if(data.success){       
            $.each(data.list,function(i,v){
                var each =  '<li class="mui-table-view-cell lis">xxxxxxxx</li>';
                $("#olist").append(each);
            });
            pageNum++;  //增页
        }
    },'json');
}

1.4 常用api

参照 http://dev.dcloud.net.cn/mui/pullup/

2. mescroll控件上拉

mescroll是一套精致的上拉js框架，集成到混合app开发中也是不错的。

2.1 相对固定的页面结构

<link rel="stylesheet" type="text/css" href="dist/mescroll.css"/>
<script src="dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<div class="mescroll chhe3"  id="mescroll">
    <ul class="data-list" id="linelist">
    </ul>
</div>

2.2 初始化

var mescroll = null;
$(function(){
    mescroll = new MeScroll("mescroll", {
    up: {
        callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
        isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
        clearEmptyId: "linelist", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
        toTop:{ //配置回到顶部按钮
            src : "res/img/mescroll-totop.png" //默认滚动到1000px显示,可配置offset修改
        }
    }
    });
});

2.3 上拉回调

function getListData(page){  //上拉回调
    getListDataFromNet(page.num, page.size, function(curPageData){
        console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
        mescroll.endSuccess(curPageData.length); //结束下拉
        setListData(curPageData);                //下拉数据页面渲染
   }, function(){
        mescroll.endErr(); //下拉异常
  });
}
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) { //获取网络数据
    var data = {};
    var ajaxSt = $.ajax({
        type:"post",
        url:LineListURL,
        data:data,
        timeout:30000,
        async:true,
        dataType:"json",
        success:function(data){
            if(data.success){
                var totalCount = data.totalCount;
                successCallback(data.data,totalCount);
            }else{
                errorCallback();
            }
        },
        complete:function(xmlHttpRequest,status){
            if(status=='timeout'){
                ajaxSt.abort();
                mui.toast('网络错误');
            }
        }
    });
}
function setListData(data){ //页面渲染
    $.each(data,function(i,v){
        var li =  '<li>xxxxxx</li>';
        $("#linelist").append(li);  
    });
}

2.4 常用api

参照 http://www.mescroll.com/api.html

懂Html就能开发App，博文持续更新，博主QQ:260737830！