apicloud apicloud

注册
查看: 5989|回复: 20

[模块教程] UIListGoods模块(界面布局-列表)demo示例

回帖奖励 15 云币
回复本帖可获得 1 云币奖励! 每人限 1 次

老司机

UID:253706

主题:
176
帖子:
16972
云币:
8007

[模块教程] UIListGoods模块(界面布局-列表)demo示例

5989 20 | 发表于 2018-2-3 14:16:08 |阅读模式 | |
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.                 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.                 <title>title</title>
  8.                 <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9.                 <style>
  10.                         body {
  11.                         }
  12.                         html, body {
  13.                                 height: 100%
  14.                         }
  15.                         body {
  16.                                 background-color: #fff;
  17.                                 margin: 0;
  18.                         }
  19.                         #wrap {
  20.                                 height: 100%;
  21.                                 position: relative;
  22.                         }
  23.                         #header {
  24.                                 padding-top: 20px;
  25.                                 background-color: #5082c2;
  26.                                 height: 44px;
  27.                                 position: relative;
  28.                         }
  29.                         #header h1 {
  30.                                 font-size: 20px;
  31.                                 height: 44px;
  32.                                 line-height: 44px;
  33.                                 margin: 0em;
  34.                                 color: #fff;
  35.                                 margin-left: 100px;
  36.                                 margin-right: 100px;
  37.                                 text-align: center;
  38.                         }
  39.                         #main {
  40.                                 display: -webkit-box;
  41.                                 -webkit-box-orient: vertical;
  42.                                 -webkit-box-pack: center;
  43.                         }
  44.                         a.button {
  45.                                 display: -webkit-box;
  46.                                 -webkit-box-orient: vertical;
  47.                                 -webkit-box-pack: center;
  48.                                 -webkit-box-align: center;
  49.                                 height: 32px;
  50.                                 margin: 8px;
  51.                                 background-color: rgba(240, 240, 240, 1.0);
  52.                                 border-color: rgba(220, 220, 220, 1.0);
  53.                                 border-width: 2px;
  54.                                 border-style: solid;
  55.                         }
  56.                         a.active {
  57.                                 background-color: rgba(240, 240, 240, 0.7);
  58.                         }
  59.                 </style>
  60.         </head>
  61.         <body>
  62.                 <a class="button" tapmode="active" onclick="fnReloadData()">刷新列表数据</a>
  63.                 <a class="button" tapmode="active" onclick="fnUpdateItem()">根据索引更新某一条列表的数据</a>
  64.                 <a class="button" tapmode="active" onclick="fnInsertItem()">根据索引向某一条列表插入数据</a>
  65.                 <a class="button" tapmode="active" onclick="fnAppendData()">向列表末端追加数据</a>
  66.         </body>
  67.         <script type="text/javascript" src="../script/api.js"></script>
  68.         <script type="text/javascript">
  69.                 var UIListGoods;
  70.                 apiready = function() {
  71.                         UIListGoods = api.require('UIListGoods');
  72.                         fnOpen();
  73.                 };
  74.                 function fnOpen() {
  75.                         UIListGoods.open({
  76.                                 rect : {
  77.                                         x : 0,
  78.                                         y : 250,
  79.                                         w : api.winWidth,
  80.                                         h : 300
  81.                                 },
  82.                                 data : [{
  83.                                         imgPath : 'widget://image/washingMachine01.jpg',
  84.                                         goodsName : '洗衣机',
  85.                                         goodsMoney : 1999,
  86.                                         condition : '无货',
  87.                                 }, {
  88.                                         imgPath : 'widget://image/washingMachine01.jpg',
  89.                                         goodsName : '洗衣机',
  90.                                         goodsMoney : 1999,
  91.                                         condition : '无货',
  92.                                 }, {
  93.                                         imgPath : 'widget://image/washingMachine01.jpg',
  94.                                         goodsName : '洗衣机',
  95.                                         goodsMoney : 1999,
  96.                                         condition : '无货',
  97.                                 }, {
  98.                                         imgPath : 'widget://image/washingMachine01.jpg',
  99.                                         goodsName : '洗衣机',
  100.                                         goodsMoney : 1999,
  101.                                         condition : '无货',
  102.                                 }, {
  103.                                         imgPath : 'widget://image/washingMachine01.jpg',
  104.                                         goodsName : '洗衣机',
  105.                                         goodsMoney : 1999,
  106.                                         condition : '无货',
  107.                                 }, {
  108.                                         imgPath : 'widget://image/washingMachine01.jpg',
  109.                                         goodsName : '洗衣机',
  110.                                         goodsMoney : 1999,
  111.                                         condition : '无货',
  112.                                 }, {
  113.                                         imgPath : 'widget://image/washingMachine01.jpg',
  114.                                         goodsName : '洗衣机',
  115.                                         goodsMoney : 1999,
  116.                                         condition : '无货',
  117.                                 }, {
  118.                                         imgPath : 'widget://image/washingMachine01.jpg',
  119.                                         goodsName : '洗衣机',
  120.                                         goodsMoney : 1999,
  121.                                         condition : '无货',
  122.                                 }, {
  123.                                         imgPath : 'widget://image/washingMachine01.jpg',
  124.                                         goodsName : '洗衣机',
  125.                                         goodsMoney : 1999,
  126.                                         condition : '无货',
  127.                                 }],
  128.                                 //                        },
  129.                                 fixedOn : api.frameName,
  130.                                 styles : {
  131.                                         item : {
  132.                                         bgColor: '#ffffff',
  133.                                         }
  134.                                 },
  135.                                 backgroundColor : '#ffffff'
  136.                         }, function(ret, err) {
  137.                                 if (ret) {
  138.                                         fnAppendData();
  139.                                 } else {
  140.                                         alert(JSON.stringify(err));
  141.                                 }
  142.                         });
  143.                 }

  144.                 function fnReloadData() {
  145.                         UIListGoods.reloadData({
  146.                                 data : [{
  147.                                         imgPath : 'http://7z2ofb.com1.z0.glb.clouddn.com/apicloud/4c252e5c245fabbc7b5a760972f2210b.jpg',
  148.                                         goodsName : '洗衣机',
  149.                                         goodsMoney : 1999,
  150.                                         condition : '无货',
  151.                                 }]
  152.                         }, function(ret) {
  153.                                 if (ret) {
  154.                                         alert(JSON.stringify(ret));
  155.                                 } else {
  156.                                         alert(JSON.stringify(err));
  157.                                 }
  158.                         });
  159.                 }

  160.                 function fnUpdateItem() {
  161.                         var UIListGoods = api.require('UIListGoods');
  162.                         UIListGoods.updateItem({
  163.                                 index : 0,
  164.                                 data : {
  165.                                         imgPath : 'http://7z2ofb.com1.z0.glb.clouddn.com/apicloud/4c252e5c245fabbc7b5a760972f2210b.jpg',
  166.                                         goodsName : '洗衣机',
  167.                                         goodsMoney : 1999,
  168.                                         condition : '无货',
  169.                                 }
  170.                         }, function(ret, err) {
  171.                                 if (ret) {
  172.                                         alert(JSON.stringify(ret));
  173.                                 } else {
  174.                                         alert(JSON.stringify(err));
  175.                                 }
  176.                         });
  177.                 }

  178.                 function fnInsertItem() {
  179.                         var UIListGoods = api.require('UIListGoods');
  180.                         UIListGoods.insertItem({
  181.                                 index : 0,
  182.                                 data : {
  183.                                         imgPath : 'http://7z2ofb.com1.z0.glb.clouddn.com/apicloud/fc4c7bbf8373c13ad9c0035e40fce384.jpg',
  184.                                         goodsName : '洗衣机',
  185.                                         goodsMoney : 1999,
  186.                                         condition : '无货',
  187.                                 }
  188.                         }, function(ret, err) {
  189.                                 if (ret) {
  190.                                         alert(JSON.stringify(ret));
  191.                                 } else {
  192.                                         alert(JSON.stringify(err));
  193.                                 }
  194.                         });
  195.                 }

  196.                 function fnAppendData() {
  197.                         var UIListGoods = api.require('UIListGoods');
  198.                         UIListGoods.appendData({
  199.                                 data : [{
  200.                                         imgPath : 'http://7z2ofb.com1.z0.glb.clouddn.com/apicloud/fc4c7bbf8373c13ad9c0035e40fce384.jpg',
  201.                                         goodsName : '洗衣机',
  202.                                         goodsMoney : 1999,
  203.                                         condition : '无货',
  204.                                 }]
  205.                         }, function(ret, err) {
  206.                                 if (ret) {
  207.                                 } else {
  208.                                         alert(JSON.stringify(err));
  209.                                 }
  210.                         });
  211.                 }
  212.         </script>
  213. </html>
复制代码
UIListGoods模块的demo,

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
3
帖子:
67
云币:
0
发表于 2018-2-3 20:47:08 |

回帖奖励 +1 云币


支持支持  6666666666

马路杀手

UID:219869

主题:
15
帖子:
246
云币:
436
发表于 2018-2-9 14:01:47 |

回帖奖励 +1 云币

:):)

主题:
4
帖子:
81
云币:
35
发表于 2018-2-22 15:33:05 |

回帖奖励 +1 云币

希望大家能够认真学习,快速的应用到实战开发当中来,

职业车手

UID:441392

主题:
32
帖子:
2302
云币:
2762

APICloud粉丝志愿者一周年中秋节女朋友装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章不觉明厉强者王者足球狗捣蛋鬼儿童节快乐

发表于 2018-2-27 10:43:51 |

回帖奖励 +1 云币

我还是想看图

马路杀手

UID:219869

主题:
15
帖子:
246
云币:
436
发表于 2018-2-28 19:08:07 |
感谢分享

马路杀手

UID:219869

主题:
15
帖子:
246
云币:
436
发表于 2018-2-28 19:08:26 |
感谢分享

驾校小白

UID:564114

主题:
1
帖子:
6
云币:
12

APICloud粉丝装逼侠

发表于 2018-2-28 19:36:32 |

回帖奖励 +1 云币

感谢分享

马路杀手

UID:521295

主题:
38
帖子:
283
云币:
235
发表于 2018-3-1 10:13:42 |

回帖奖励 +1 云币

对对,一会这种demo能否把图也放上去

主题:
1
帖子:
16
云币:
6
发表于 2018-3-1 20:13:35 |

回帖奖励 +1 云币

嘿嘿哈哈
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表