apicloud apicloud

注册
查看: 235|回复: 1

[模块教程] UIListUpload 模块demo

官方版主

UID:791051

主题:
10
帖子:
9809
云币:
3259

端午节

[模块教程] UIListUpload 模块demo

235 1 | 发表于 2019-7-21 23:15:15 |阅读模式 | |
本帖最后由 yxWin 于 2019-7-26 18:12 编辑

UIListUpload概述
UIListUpload 模块封装了一个数据列表控件,列表项水平侧滑可出现控制按钮;开发者可自定义列表的数据源,及列表的样式,支持列表项的增、删、改、查,支持批量更新、追加数据,支持下拉刷新和上拉加载事件。
应用方法:
open 打开 UIListUpLoad 模块updateHeaderText 更新header文本close 关闭数据列表模块show 显示 UIListView 模块hide 隐藏 UIListView 模块setAttr 设置列表的纵坐标和高度getIndex 根据开发者自定义的唯一标识查找列表项对应的数据getDataByIndex 根据列表项的索引获取对应的数据setSwipeBtns 设置侧滑显示出来的按钮reloadData 刷新列表数据deleteItem 根据索引删除某一条列表的数据updateItem 根据索引更新某一条列表的数据insertItem 根据索引向某一条列表插入数据appendData 向列表末端追加数据getCount 获取当前列表的总数据量setRefreshHeader 设置下拉刷新setRefreshFooter 设置上拉加载stopRefresh 停止刷新(仅Android有效)

demo运行截图:


代码:
  1. <script type="text/javascript">
  2.       apiready = function(){
  3.         //openUI();
  4.       };
  5.       //设置上滑加载更多
  6.       function refreshF() {
  7.         var UIListUpload = api.require('UIListUpload');
  8.         UIListUpload.setRefreshFooter({
  9.             loadingImg: 'widget://res/UIListView_arrow.png',
  10.             bgColor: '#F5F5F5',
  11.             textColor: '#8E8E8E',
  12.             textUp: '上拉加载更多...',
  13.             textDown: '松开开始加载...',
  14.             showTime: true
  15.         }, function(ret, err) {
  16.             if (ret) {
  17.                 //alert(JSON.stringify(ret));
  18.                 appendFooter();
  19.             } else {
  20.                 alert(JSON.stringify(err));
  21.             }
  22.         });
  23.       }
  24.       //设置下拉刷新
  25.       function refreshH() {
  26.         var UIListUpload = api.require('UIListUpload');
  27.         UIListUpload.setRefreshHeader({
  28.            style: {
  29.                 bgColor: '#C0C0C0',
  30.                 isScale: true,
  31.                 image: {
  32.                     pull: [
  33.                         'widget://image/refresh/dropdown0.png',
  34.                         'widget://image/refresh/dropdown1.png',
  35.                         'widget://image/refresh/dropdown2.png',
  36.                         'widget://image/refresh/dropdown3.png',
  37.                         'widget://image/refresh/dropdown4.png',
  38.                         'widget://image/refresh/dropdown5.png',
  39.                         'widget://image/refresh/dropdown6.png'
  40.                     ],
  41.                     load: [
  42.                         'widget://image/refresh/loading0.png',
  43.                         'widget://image/refresh/loading1.png',
  44.                         'widget://image/refresh/loading2.png',
  45.                         'widget://image/refresh/loading3.png',
  46.                         'widget://image/refresh/loading4.png'
  47.                     ]
  48.                 }
  49.             }
  50.         }, function(ret) {
  51.            //下拉刷新被触发,自动进入加载状态,使用 reloadData() 手动结束加载中状态
  52.             alert('开始加载刷新数据,摇一摇停止加载状态');
  53.             api.addEventListener({
  54.                 name: 'shake'
  55.             }, function(ret, err) {
  56.                 reloadData();
  57.             });
  58.         });
  59.       }
  60.       //获取当前列表总数
  61.       function getCountList() {
  62.         var UIListUpload = api.require('UIListUpload');
  63.         UIListUpload.getCount(function(ret) {
  64.             alert(JSON.stringify(ret));
  65.         });
  66.       }
  67.       //向列表尾部追加数据
  68.       function appendFooter() {
  69.         var UIListUpload = api.require('UIListUpload');
  70.         UIListUpload.appendData({
  71.             data: [{
  72.                 imgPath: 'http://d.hiphotos.baidu.com/image/pic/item/4d086e061d950a7b29a788c209d162d9f2d3c922.jpg',
  73.                 title: '新增标题',
  74.                 subTitle: '新增子标题',
  75.             }]
  76.         }, function(ret, err) {
  77.             if (ret) {
  78.                 alert(JSON.stringify(ret));
  79.             } else {
  80.                 alert(JSON.stringify(err));
  81.             }
  82.         });
  83.       }
  84.       //根据索引插入数据
  85.       function insertByIndex(){
  86.         var UIListUpload = api.require('UIListUpload');
  87.         UIListUpload.insertItem({
  88.             data: {
  89.                 condition:'等待上传new',     //(可选项)字符串类型;状态,若不传则不显示
  90.             }
  91.         }, function(ret, err) {
  92.             if (ret) {
  93.                 alert(JSON.stringify(ret));
  94.             } else {
  95.                 alert(JSON.stringify(err));
  96.             }
  97.         });
  98.       }
  99.       //根据索引更新一条列表数据
  100.       function updataByIndex() {
  101.         var UIListUpload = api.require('UIListUpload');
  102.         UIListUpload.updateItem({
  103.             index: 2,
  104.             data: {
  105.                 imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  106.                 title: '刷新标题',
  107.                 subTitle: '刷新子标题',
  108.             }
  109.         }, function(ret, err) {
  110.             if (ret) {
  111.                 alert(JSON.stringify(ret));
  112.             } else {
  113.                 alert(JSON.stringify(err));
  114.             }
  115.         });
  116.       }
  117.       //根据索引删除一条数据
  118.       function deleteByIndex() {
  119.         var UIListUpload = api.require('UIListUpload');
  120.         UIListUpload.deleteItem({
  121.             index: 2
  122.         }, function(ret, err) {
  123.             if (ret) {
  124.                 alert(JSON.stringify(ret));
  125.             } else {
  126.                 alert(JSON.stringify(err));
  127.             }
  128.         });
  129.       }
  130.       //刷新数据
  131.       function reloadData() {
  132.         var UIListUpload = api.require('UIListUpload');
  133.         UIListUpload.reloadData({
  134.             data: [{
  135.                 imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  136.                 title: '新标题',
  137.                 subTitle: '新子标题',
  138.                 remark: '新备注',
  139.                 icon: ''
  140.             }]
  141.         }, function(ret) {
  142.             if (ret) {
  143.                 alert(JSON.stringify(ret));
  144.             } else {
  145.                 alert(JSON.stringify(err));
  146.             }
  147.         });
  148.       }
  149.       //设置侧滑按钮
  150.       function setRightBtn() {
  151.         var UIListUpload = api.require('UIListUpload');
  152.         UIListUpload.setSwipeBtns({
  153.             index: 0,
  154.             btns: [{
  155.                 bgColor: '#09c',
  156.                 activeBgColor: '#0cf',
  157.                 width: 70,
  158.                 title: '恢复',
  159.                 titleSize: 12,
  160.                 titleColor: '#fff',
  161.                 icon: '',
  162.                 iconWidth: 20
  163.             }]
  164.         }, function(ret, err) {
  165.             if (ret) {
  166.                 alert(JSON.stringify(ret));
  167.             } else {
  168.                 alert(JSON.stringify(err));
  169.             }
  170.         });
  171.       }
  172.       //根据列表索引查找
  173.       function getByIndex() {
  174.         var UIListUpload = api.require('UIListUpload');
  175.         UIListUpload.getDataByIndex({
  176.             index: 3
  177.         }, function(ret, err) {
  178.             if (ret) {
  179.                 alert(JSON.stringify(ret));
  180.             } else {
  181.                 alert(JSON.stringify(err));
  182.             }
  183.         });
  184.       }
  185.       //根据id查找
  186.       function getById() {
  187.         var UIListUpload = api.require('UIListUpload');
  188.         UIListUpload.getIndex({
  189.             key: 'uid',
  190.             value: '1002'
  191.         }, function(ret, err) {
  192.             if (ret) {
  193.                 alert(JSON.stringify(ret));
  194.             } else {
  195.                 alert(JSON.stringify(err));
  196.             }
  197.         });
  198.       }
  199.       //关闭模块
  200.       function closeUI() {
  201.         var UIListUpload = api.require('UIListUpload');
  202.         UIListUpload.close();
  203.       }
  204.       //设置列表的纵坐标以及高度
  205.       function setListH() {
  206.         var UIListUpload = api.require('UIListUpload');
  207.         UIListUpload.setAttr({
  208.             y: 40,
  209.             h: 200
  210.         }, function(ret, err) {
  211.             if (ret) {
  212.                 alert(JSON.stringify(ret));
  213.             } else {
  214.                 alert(JSON.stringify(err));
  215.             }
  216.         });
  217.       }
  218.       //更新header文本
  219.       function reloadHead(){
  220.         var UIListUpload = api.require('UIListUpload');
  221.         UIListUpload.updateHeaderText({
  222.               text:'some text'
  223.         });
  224.         console.log('ok');
  225.       }
  226.       //打开视图
  227.       function openUI(){
  228.         var UIListUpload = api.require('UIListUpload');
  229.         UIListUpload.open({
  230.             rect: {
  231.                 x: 0,
  232.                 y: 0,
  233.                   w: api.winWidth,
  234.                   h: api.frameHeight - 150
  235.               },
  236.               data: [{
  237.                   uid: '1001',
  238.                   imgPath: 'widget://image/009.png',
  239.                   title: '标题',
  240.                   subTitle: '子标题,说明文字',
  241.                   name:'数据1',
  242.                   condition:'正在上传',
  243.                   conditionColor: '#b2c',
  244.                   rightBtns: [{
  245.                       bgColor: '#006600',
  246.                       activeBgColor: '#00cc00',
  247.                       width: 70,
  248.                       title: '取消上传',
  249.                       titleSize: 12,
  250.                       titleColor: '#fff',
  251.                       icon: '',
  252.                       iconWidth: 20
  253.                   },{
  254.                       bgColor: '#ff6600',
  255.                       activeBgColor: '#ff9900',
  256.                       width: 70,
  257.                       title: '暂停上传',
  258.                       titleSize: 12,
  259.                       titleColor: '#fff',
  260.                       icon: '',
  261.                       iconWidth: 20
  262.                   }]
  263.               }, {
  264.                   uid: '1002',
  265.                   imgPath: 'widget://image/009.png',
  266.                   name:'数据2',
  267.                   condition:'等待上传',
  268.                   title: '标题',
  269.                   subTitle: '子标题,说明文字',
  270.               }, {
  271.                   uid: '1003',
  272.                   imgPath: 'widget://image/009.png',
  273.                   name:'数据3',
  274.                   condition:'等待上传',
  275.                   title: '标题',
  276.                   subTitle: '子标题,说明文字',
  277.               }, {
  278.                   uid: '1004',
  279.                   imgPath: 'widget://image/009.png',
  280.                   name:'数据4',
  281.                   condition:'等待上传',
  282.                   title: '标题',
  283.                   subTitle: '子标题,说明文字',

  284.               }, {
  285.                   uid: '1005',
  286.                   imgPath: 'widget://image/009.png',
  287.                   name:'数据5',
  288.                   condition:'等待上传',
  289.                   title: '标题',
  290.                   subTitle: '子标题,说明文字',

  291.               }, {
  292.                   uid: '1006',
  293.                   imgPath: 'widget://image/009.png',
  294.                   name:'数据6',
  295.                   condition:'等待上传',
  296.                   title: '标题',
  297.                   subTitle: '子标题,说明文字',

  298.               }, {
  299.                   uid: '1007',
  300.                   imgPath: 'widget://image/009.png',
  301.                   name:'数据7',
  302.                   condition:'等待上传',
  303.                   title: '标题',
  304.                   subTitle: '子标题,说明文字',

  305.               }, {
  306.                   uid: '1008',
  307.                   imgPath: 'widget://image/009.png',
  308.                   name:'数据8',
  309.                   condition:'等待上传',
  310.                   title: '标题',
  311.                   subTitle: '子标题,说明文字',

  312.               }, {
  313.                   uid: '1009',
  314.                   imgPath: 'widget://image/009.png',
  315.                   name:'数据9',
  316.                   condition:'等待上传',
  317.                   title: '标题',
  318.                   subTitle: '子标题,说明文字',

  319.               }],
  320.               rightBtns: [{
  321.                   bgColor: '#388e8e',
  322.                   activeBgColor: '',
  323.                   width: 70,
  324.                   title: '提前上传',
  325.                   titleSize: 12,
  326.                   titleColor: '#fff',
  327.                   icon: '',
  328.                   iconWidth: 20
  329.               }],
  330.               styles: {
  331.                   borderColor: '#696969',
  332.                   spaceHeight: 5,                    //(可选项)数字类型;列表间隔的高度,默认:20
  333.                   spaceColor:'rgba(0,0,0,0.3)',
  334.                   item: {
  335.                       bgColor: '#AFEEEE',
  336.                       activeBgColor: '#F5F5F5',
  337.                       height: 55.0,
  338.                       imgWidth: 40,
  339.                       imgHeight: 40,
  340.                       imgCorner: 4,
  341.                       nameSize:'14',
  342.                       nameColor:'#000',
  343.                       conditionSize:'14',
  344.                       titleSize: 12.0,
  345.                       titleColor: '#000',
  346.                       subTitleSize: 12.0,
  347.                       subTitleColor: '#000',
  348.                       remarkColor: '#000',
  349.                       remarkSize: 16,
  350.                       remarkIconWidth: 30,

  351.                   }
  352.               },
  353.               fixedOn: api.frameName
  354.           }, function(ret, err) {
  355.               if (ret) {
  356.                 if (ret.eventType == 'scrollToBottom') {  //滑动到底部  可以添加上滑加载所以没必要提示
  357.                   return;
  358.                 } else {
  359.                   alert(JSON.stringify(ret));
  360.                 }
  361.               } else {
  362.                   alert(JSON.stringify(err));
  363.               }
  364.           });
  365.       }
  366.   </script>
复制代码
:下拉刷新 上滑加载都是方法添加。

上拉加载,通过 appendData 收起上拉加载组件
下拉刷新,通过 reloadData 收起下拉刷新组件
stopRefresh停止刷新(仅Android有效)
demo
[url=]UIListUploadDemo.zip[/url]








如果有bug欢迎指出,感谢





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

【新模块开发建议/老模块优化建议】提建议,奖云币,截止至11月30日---点击提建议

版主

UID:546828

主题:
31
帖子:
3511
云币:
33815

端午节圣诞节捣蛋鬼APICloud五岁啦

发表于 2019-7-21 23:54:17 |
感谢版主大大分享
您需要登录后才可以回帖 登录 | 立即注册

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