MUI 列表页面绑定接口数据

Posted 2020-08-13 程序员老郑

1、我们先看效果

2、功能分析

主要分为3步

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