apicloud apicloud

注册
查看: 11343|回复: 18

[APP开发技巧] 适合新手看的代码:listview列表

驾校小白

UID:17597

主题:
6
帖子:
22
云币:
74

[APP开发技巧] 适合新手看的代码:listview列表

11343 18 | 发表于 2014-12-13 16:45:09 |阅读模式 | |
本帖最后由 wind 于 2014-12-13 16:47 编辑
  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,initial-scale=1.0,width=device-width"/>
  6.     <title>APP</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  8.     <link rel="stylesheet" type="text/css" href="../css/common.css" />
  9.         <style>
  10.     #header {
  11.         background-color:#2DBD82;
  12.     }
  13.     #nav{
  14.         display:-webkit-box;
  15.         height:44px;
  16.     }
  17.     #left {
  18.         width:80px;
  19.         color:#fff;
  20.         background:url(../image/navbtn_back.png) no-repeat 14px 12px;
  21.         -webkit-background-size:12px 20px;
  22.     }
  23.     #left>span {
  24.         margin-top:13px;
  25.         margin-left:36px;
  26.         font-size:18px;
  27.         height:18px;
  28.         line-height:18px;
  29.         color: #fff;
  30.     }
  31.     #middle {
  32.         -webkit-box-flex:1;
  33.         width:100%;
  34.         display:-webkit-box;
  35.         -webkit-box-pack:center;
  36.         -webkit-box-align:center;
  37.     }
  38.     #title {
  39.         font-size:18px;
  40.         text-align:center;
  41.         color:#fff;
  42.     }
  43.     #right {
  44.         width:80px;
  45.     }
  46.     section {
  47.         -webkit-box-flex:1;
  48.     }
  49.     .leftBtnActive {
  50.         background:url(../image/navbtn_back_hov.png) no-repeat 14px 12px!important;
  51.         -webkit-background-size:12px 20px!important;
  52.         color:rgb(94,153,186)!important;
  53.     }
  54.     .rightBtnActive {
  55.     }
  56.         </style>
  57. </head>
  58. <body>

  59. </body>
  60. <script type="text/javascript" src="../script/api.js"></script>
  61. <script type="text/javascript">

  62.     apiready = function(){
  63.                 var obj = api.require('listView');
  64.                         obj.open({
  65.                             h:568,
  66.                             leftBtn:[{color:'#8B0000',title:'左按钮1'},{color:'#228B22',title:'左按钮2'}],
  67.                             rightBtn:[{color:'#8B0000',title:'右按钮1'},{color:'#228B22',title:'右按钮2'}],
  68.                             data:[{placeHoldImg:'widget://res/listview.png',img:'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',title:'标题',subTitle:'哇靠,为毛会这样啊!'},
  69.                                 {placeHoldImg: 'widget://res/listview.png',title:'学习中',subTitle:'APIcloud'},
  70.                                 {placeHoldImg: 'widget://res/listview.png',title:'标题',subTitle:'子标题'},
  71.                                 {placeHoldImg: 'widget://res/listview.png',title:'标题',subTitle:'子标题'},
  72.                                 {placeHoldImg: 'widget://res/listview.png',title:'标题',subTitle:'子标题'},
  73.                                 {placeHoldImg: 'widget://res/listview.png',title:'标题',subTitle:'子标题'},
  74.                                 {placeHoldImg: 'widget://res/listview.png',title:'标题',subTitle:'子标题'},
  75.                                 {placeHoldImg: 'widget://res/listview.png',title:'标题',subTitle:'子标题'},
  76.                                 {placeHoldImg: 'widget://res/listview.png',title:'标题',subTitle:'子标题'},
  77.                                 {placeHoldImg: 'widget://res/listview.png',title:'标题',subTitle:'子标题'},
  78.                                 {placeHoldImg: 'widget://res/listview.png',title:'标题',subTitle:'子标题'}]
  79.                         },function(ret,err){
  80.                             api.alert({msg:ret.index});
  81.                         });
  82.                         var loadingImgae = 'widget://res/listView_arrow.png';     //刷新的小箭头,不可为空
  83. var bgColor = '#F5F5F5';                                  //下拉刷新的背景颜色 ,有默认值,可为空
  84. var textColor= '#8E8E8E';                                 //提示语颜色,有默认值,可为空
  85. var textDown= '下拉可以刷新...';                             //尚未触发刷新时间的提示语,有默认值,可为空
  86. var textUp= '松开开始刷新...';                               //触发刷新事件的提示语,有默认值,可为空
  87. var showTime= true;                                       //是否显示时间,有默认值,可为空

  88. var obj = api.require('listView');
  89. obj.setRefreshHeader({
  90.     loadingImg : loadingImgae,
  91.     bgColor:bgColor,
  92.     textColor:textColor,
  93.     textDown:textDown,
  94.     textUp:textUp,
  95.     showTime : showTime
  96. },function(ret,err){
  97.    obj.appendData({
  98.      data:[{placeHoldImg:'widget://res/listview1.png',title:'API',subTitle:'子标题,说明文字'},
  99.          {placeHoldImg:'widget://res/listview1.png',title:'API',subTitle:'子标题'},
  100.          {placeHoldImg:'widget://res/listview1.png',title:'API',subTitle:'子标题,说明文字'},
  101.          {placeHoldImg:'widget://res/listview1.png',title:'hello',subTitle:'子标题,说明文字。'},
  102.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题'},
  103.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题,说明文字'},
  104.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题,说明文字'},
  105.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题'},
  106.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题,说明文字'},
  107.          {placeHoldImg:'widget://res/listview1.png',title:'API',subTitle:'子标题,说明文字'},
  108.          {placeHoldImg:'widget://res/listview1.png',title:'API',subTitle:'子标题,说明文字'}]
  109. });
  110. });
  111.                         
  112.                         
  113.                         var loadingImgae = 'widget://res/listView_arrow.png';       //刷新的小箭头,不可为空
  114.                         var bgColor = '#F5F5F5';                                    //下拉刷新的背景颜色 ,有默认值,可为空
  115.                         var textColor= '#8E8E8E';                                   //提示语颜色,有默认值,可为空
  116.                         var textDown= '下拉可加载更多...';                             //尚未触发刷新时间的提示语,有默认值,可为空
  117.                         var textUp= '松开开始加载...';                                 //触发刷新事件的提示语,有默认值,可为空
  118.                         var showTime= true;                                         //是否显示时间,有默认值,可为空        
  119.                         var obj = api.require('listView');
  120.                         obj.setRefreshFooter({
  121.                             loadingImg:loadingImgae,
  122.                             bgColor:bgColor,
  123.                             textColor:textColor,
  124.                             textDown:textDown,
  125.                             textUp:textUp,
  126.                             showTime:showTime
  127.                         },function(ret,err){
  128.                             obj.appendData({
  129.      data:[{placeHoldImg:'widget://res/listview1.png',title:'hello',subTitle:'子标题,说明文字'},
  130.          {placeHoldImg:'widget://res/listview1.png',title:'hello',subTitle:'子标题'},
  131.          {placeHoldImg:'widget://res/listview1.png',title:'hello',subTitle:'子标题,说明文字'},
  132.          {placeHoldImg:'widget://res/listview1.png',title:'hello',subTitle:'子标题,说明文字。'},
  133.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题'},
  134.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题,说明文字'},
  135.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题,说明文字'},
  136.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题'},
  137.          {placeHoldImg:'widget://res/listview1.png',title:'标题',subTitle:'子标题,说明文字'},
  138.          {placeHoldImg:'widget://res/listview1.png',title:'hello',subTitle:'子标题,说明文字'},
  139.          {placeHoldImg:'widget://res/listview1.png',title:'hello',subTitle:'子标题,说明文字'}]
  140. });
  141.                         });
  142.     };
  143. </script>
  144. </html>
复制代码
这个实现了上拉刷新,下滑加载。
做法是:
新建一个app,然后进入html文件夹,把这些代码给放到main.html里面替换就行了,就可以看到效果。


我要偷偷的告诉你:
官方在下滑加载的setRefreshFooter写少了个r。

其实我觉得为什么上拉刷新不是像微博那样追加在上面的呢?反而是追加在下面的!
纠结了2天终于了解了一个模块了,都差点想放弃了!

其实这个暂时来说,还不是很适合新手,特别是没有JS基础的童鞋!


驾校小白

UID:17597

主题:
6
帖子:
22
云币:
74
 楼主| 发表于 2014-12-13 18:05:30 |
APICloud官方 发表于 2014-12-13 17:03
感谢分享。请问那块是文档错误么?我去确认下

还有啊,你们为什么上拉刷新不做成像微博那样追加数据在上面反而是下面呢???要不给我们个选择呗!!

主题:
1102
帖子:
5126
云币:
2147214880

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2014-12-13 17:03:52 |
感谢分享。请问那块是文档错误么?我去确认下

驾校小白

UID:17597

主题:
6
帖子:
22
云币:
74
 楼主| 发表于 2014-12-13 18:04:16 |
APICloud官方 发表于 2014-12-13 17:03
感谢分享。请问那块是文档错误么?我去确认下

是的,你们写少了!!!

主题:
0
帖子:
5
云币:
5
发表于 2014-12-14 01:05:25 |
wind 发表于 2014-12-13 18:05
还有啊,你们为什么上拉刷新不做成像微博那样追加数据在上面反而是下面呢???要不给我们个选择呗!! ...

应该给个选择数据插入方向的参数

驾校小白

UID:17597

主题:
6
帖子:
22
云币:
74
 楼主| 发表于 2014-12-14 11:36:41 |
13145i01314 发表于 2014-12-14 01:05
应该给个选择数据插入方向的参数

或者,我们可以改么?

新手上路

UID:18446

主题:
4
帖子:
13
云币:
354
发表于 2014-12-25 19:18:53 |
listview中cell为什么不能自己定义样式呢,我不只有title和subtitle,还有其他项这么搞,还要点击赞,点击回复都不行,不能自己定义一个css来控制cell中内容的显示么

新手上路

UID:18446

主题:
4
帖子:
13
云币:
354
发表于 2014-12-25 19:18:56 |
listview中cell为什么不能自己定义样式呢,我不只有title和subtitle,还有其他项这么搞,还要点击赞,点击回复都不行,不能自己定义一个css来控制cell中内容的显示么

主题:
41
帖子:
287
云币:
1474
发表于 2014-12-25 21:08:00 |
山风 发表于 2014-12-25 19:18
listview中cell为什么不能自己定义样式呢,我不只有title和subtitle,还有其他项这么搞,还要点击赞,点击 ...

你所说的是可以的,但就不是使用这里的listview模块了,而是完全自己写一个界面出来了
个人博客:http://hanc.cc

主题:
41
帖子:
287
云币:
1474
发表于 2014-12-25 21:08:05 |
山风 发表于 2014-12-25 19:18
listview中cell为什么不能自己定义样式呢,我不只有title和subtitle,还有其他项这么搞,还要点击赞,点击 ...

你所说的是可以的,但就不是使用这里的listview模块了,而是完全自己写一个界面出来了
个人博客:http://hanc.cc
12下一页
您需要登录后才可以回帖 登录 | 立即注册

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