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=\"width: 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