MUI 列表页面绑定接口数据

1、我们先看效果

2、功能分析

主要分为3步

1. 数据初始化
2. 下拉刷新
3. 上拉加载

接口数据示例：

{
  "List": [
    {
      "Id": 9,
      "OrderCode": "1070010106490008",
      "PhoneModel": "三星 盖乐世s6 白色",
      "UserName": "张三",
      "Status": 3,
      "Message": null,
      "CreatedDate": "2016-09-29 15:23"
    },
    {
      "Id": 8,
      "OrderCode": "1070010106490007",
      "PhoneModel": "三星 盖乐世s6 白色",
      "UserName": "张三",
      "Status": 2,
      "Message": null,
      "CreatedDate": "2016-09-29 15:23"
    }
  ],
  "TotalRecords": 4
}

js代码:

mui.init();
(function($) {
    //阻尼系数
    var deceleration = mui.os.ios ? 0.003 : 0.0009;
    $('.mui-scroll-wrapper').scroll({
        bounce: false,
        indicators: true, //是否显示滚动条
        deceleration: deceleration
    });
    $.ready(function() {
        //循环初始化所有下拉刷新，上拉加载。
        $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'),
            function(index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    down: {
                        callback: function() {
                            var self = this;
                            setTimeout(function() {
                                try {
                                    var ul = self.element.querySelector('.mui-table-view');
                                    var ul_id = ul.id;

                                    var arr = ul_id.split("-");
                                    var obj = list_item[arr[1]];

                                    jQuery("#" + obj.id).empty();
                                    load_items(obj);
                                } catch(e) {

                                } finally {
                                    self.endPullDownToRefresh();
                                }
                            }, 1000);
                        }
                    },
                    up: {
                        callback: function() {
                            var self = this;
                            setTimeout(function() {
                                try {
                                    var ul = self.element.querySelector('.mui-table-view');
                                    var ul_id = ul.id;

                                    var arr = ul_id.split("-");
                                    var obj = list_item[arr[1]];
                                    var pageIndex = parseInt(obj.pageIndex) + 1;
                                    obj.pageIndex = pageIndex;

                                    load_items(obj);
                                } catch(e) {

                                } finally {
                                    self.endPullUpToRefresh();
                                }
                            }, 1000);

                        }
                    }
                });
            });
        var createFragment = function(ul, index, count, reverse) {
            var length = ul.querySelectorAll('li').length;
            var fragment = document.createDocumentFragment();
            var li;
            for(var i = 0; i < count; i++) {
                li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
                fragment.appendChild(li);
            }
            return fragment;
        };
    });
})(mui);

var list_item = [{
    id: "shz",
    status: 0,
    statusName: "审核中",
    pageIndex: 1,
    pageSize: 10
}, {
    id: "ywc",
    status: 1,
    statusName: "已完成",
    pageIndex: 1,
    pageSize: 10
}, {
    id: "shsb",
    status: 2,
    statusName: "审核失败",
    pageIndex: 1,
    pageSize: 10
}];

$(function() {
    for(var i in list_item) {
        load_items(list_item[i]);
    }
});

function load_items(obj) {
    ax.g("api/order/getOrderList", {
            status: obj.status,
            pageIndex: obj.pageIndex,
            pageSize: obj.pageSize
        },
        function(d) {
            var list = d.List;
            for(var i in list) {
                var item = list[i];
                var id = item.Id;
                var status = obj.status;
                var strVar = "";
                strVar += "<li class="listli">";
                strVar += "<ul class="mui-table-view" id="order_card" + "-" + status + "-" + id + "">";
                strVar += "    <span class="mui-icon mui-icon-arrowright r-topicon2"></span>";
                strVar += "    <li class="mui-table-view-cell order_main">";
                strVar += "    <img src="img/order-img.png" style=" 14px;position: absolute;left: 0;"/>";
                strVar += "    <a class="co000">";
                strVar += "    <span class="co000">" + item.UserName + "</span>";
                strVar += "    <span class="mui-pull-right co000">" + obj.statusName + "</span>";
                strVar += "    </a>";
                strVar += "    </li>";
                strVar += "    <li class="mui-table-view-cell">";
                strVar += "    <a class="co888">";
                strVar += "                        订单编号";
                strVar += "    <span class="mui-pull-right co000">" + item.OrderCode + "</span>";
                strVar += "    </a>";
                strVar += "    </li>";
                strVar += "    <li class="mui-table-view-cell">";
                strVar += "    <a class="co888">";
                strVar += "                        商品名称";
                strVar += "    <span class="mui-pull-right co000">" + item.PhoneModel + "</span>";
                strVar += "    </a>";
                strVar += "    </li>";
                strVar += "    <li class="mui-table-view-cell">";
                strVar += "    <a class="co888">";
                strVar += "创建时间";
                strVar += "    <span class="mui-pull-right co000">" + new Date(item.CreatedDate).Format("yyyy-MM-dd hh:mm") + "</span>";
                strVar += "    </a>";
                strVar += "    </li>";
                if(obj.status == 2) {
                    strVar += "<li class="mui-table-view-cell">";
                    strVar += "<a class="co888">";
                    strVar += "                        失败原因";
                    strVar += "<span class="mui-pull-right co000">" + (item.Message == null ? "" : item.Message) + "</span>";
                    strVar += "</a>";
                    strVar += "</li>";
                }
                strVar += "</ul>";
                strVar += "</li>";

                $("#" + obj.id).append(strVar);
            }
        });
}

完整代码分享：

链接: http://pan.baidu.com/s/1jHN9TGE 密码: 9xza