MUI 列表页面绑定接口数据
1、我们先看效果
2、功能分析
主要分为3步
- 数据初始化
- 下拉刷新
- 上拉加载
接口数据示例：
1 { 2 "List": [ 3 { 4 "Id": 9, 5 "OrderCode": "1070010106490008", 6 "PhoneModel": "三星 盖乐世s6 白色", 7 "UserName": "张三", 8 "Status": 3, 9 "Message": null, 10 "CreatedDate": "2016-09-29 15:23" 11 }, 12 { 13 "Id": 8, 14 "OrderCode": "1070010106490007", 15 "PhoneModel": "三星 盖乐世s6 白色", 16 "UserName": "张三", 17 "Status": 2, 18 "Message": null, 19 "CreatedDate": "2016-09-29 15:23" 20 } 21 ], 22 "TotalRecords": 4 23 }
js代码:
1 mui.init(); 2 (function($) { 3 //阻尼系数 4 var deceleration = mui.os.ios ? 0.003 : 0.0009; 5 $('.mui-scroll-wrapper').scroll({ 6 bounce: false, 7 indicators: true, //是否显示滚动条 8 deceleration: deceleration 9 }); 10 $.ready(function() { 11 //循环初始化所有下拉刷新，上拉加载。 12 $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), 13 function(index, pullRefreshEl) { 14 $(pullRefreshEl).pullToRefresh({ 15 down: { 16 callback: function() { 17 var self = this; 18 setTimeout(function() { 19 try { 20 var ul = self.element.querySelector('.mui-table-view'); 21 var ul_id = ul.id; 22 23 var arr = ul_id.split("-"); 24 var obj = list_item[arr[1]]; 25 26 jQuery("#" + obj.id).empty(); 27 load_items(obj); 28 } catch(e) { 29 30 } finally { 31 self.endPullDownToRefresh(); 32 } 33 }, 1000); 34 } 35 }, 36 up: { 37 callback: function() { 38 var self = this; 39 setTimeout(function() { 40 try { 41 var ul = self.element.querySelector('.mui-table-view'); 42 var ul_id = ul.id; 43 44 var arr = ul_id.split("-"); 45 var obj = list_item[arr[1]]; 46 var pageIndex = parseInt(obj.pageIndex) + 1; 47 obj.pageIndex = pageIndex; 48 49 load_items(obj); 50 } catch(e) { 51 52 } finally { 53 self.endPullUpToRefresh(); 54 } 55 }, 1000); 56 57 } 58 } 59 }); 60 }); 61 var createFragment = function(ul, index, count, reverse) { 62 var length = ul.querySelectorAll('li').length; 63 var fragment = document.createDocumentFragment(); 64 var li; 65 for(var i = 0; i < count; i++) { 66 li = document.createElement('li'); 67 li.className = 'mui-table-view-cell'; 68 li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1))); 69 fragment.appendChild(li); 70 } 71 return fragment; 72 }; 73 }); 74 })(mui); 75 76 var list_item = [{ 77 id: "shz", 78 status: 0, 79 statusName: "审核中", 80 pageIndex: 1, 81 pageSize: 10 82 }, { 83 id: "ywc", 84 status: 1, 85 statusName: "已完成", 86 pageIndex: 1, 87 pageSize: 10 88 }, { 89 id: "shsb", 90 status: 2, 91 statusName: "审核失败", 92 pageIndex: 1, 93 pageSize: 10 94 }]; 95 96 $(function() { 97 for(var i in list_item) { 98 load_items(list_item[i]); 99 } 100 }); 101 102 function load_items(obj) { 103 ax.g("api/order/getOrderList", { 104 status: obj.status, 105 pageIndex: obj.pageIndex, 106 pageSize: obj.pageSize 107 }, 108 function(d) { 109 var list = d.List; 110 for(var i in list) { 111 var item = list[i]; 112 var id = item.Id; 113 var status = obj.status; 114 var strVar = ""; 115 strVar += "<li class=\"listli\">"; 116 strVar += "<ul class=\"mui-table-view\" id=\"order_card" + "-" + status + "-" + id + "\">"; 117 strVar += " <span class=\"mui-icon mui-icon-arrowright r-topicon2\"><\/span>"; 118 strVar += " <li class=\"mui-table-view-cell order_main\">"; 119 strVar += " <img src=\"img/order-img.png\" style=\"width: 14px;position: absolute;left: 0;\"/>"; 120 strVar += " <a class=\"co000\">"; 121 strVar += " <span class=\"co000\">" + item.UserName + "<\/span>"; 122 strVar += " <span class=\"mui-pull-right co000\">" + obj.statusName + "<\/span>"; 123 strVar += " <\/a>"; 124 strVar += " <\/li>"; 125 strVar += " <li class=\"mui-table-view-cell\">"; 126 strVar += " <a class=\"co888\">"; 127 strVar += " 订单编号"; 128 strVar += " <span class=\"mui-pull-right co000\">" + item.OrderCode + "<\/span>"; 129 strVar += " <\/a>"; 130 strVar += " <\/li>"; 131 strVar += " <li class=\"mui-table-view-cell\">"; 132 strVar += " <a class=\"co888\">"; 133 strVar += " 商品名称"; 134 strVar += " <span class=\"mui-pull-right co000\">" + item.PhoneModel + "<\/span>"; 135 strVar += " <\/a>"; 136 strVar += " <\/li>"; 137 strVar += " <li class=\"mui-table-view-cell\">"; 138 strVar += " <a class=\"co888\">"; 139 strVar += "创建时间"; 140 strVar += " <span class=\"mui-pull-right co000\">" + new Date(item.CreatedDate).Format("yyyy-MM-dd hh:mm") + "<\/span>"; 141 strVar += " <\/a>"; 142 strVar += " <\/li>"; 143 if(obj.status == 2) { 144 strVar += "<li class=\"mui-table-view-cell\">"; 145 strVar += "<a class=\"co888\">"; 146 strVar += " 失败原因"; 147 strVar += "<span class=\"mui-pull-right co000\">" + (item.Message == null ? "" : item.Message) + "<\/span>"; 148 strVar += "<\/a>"; 149 strVar += "<\/li>"; 150 } 151 strVar += "<\/ul>"; 152 strVar += "<\/li>"; 153 154 $("#" + obj.id).append(strVar); 155 } 156 }); 157 }
完整代码分享：
链接: http://pan.baidu.com/s/1jHN9TGE 密码: 9xza
