apicloud apicloud

注册
查看: 2631|回复: 24

[模块教程] UIPullRefreshMotive模块(界面布局-下拉刷新)demo示例

老司机

UID:253706

主题:
177
帖子:
16969
云币:
8001

[模块教程] UIPullRefreshMotive模块(界面布局-下拉刷新)demo示例

2631 24 | 发表于 2018-3-10 17:29:26 |阅读模式 | |
  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="fnRefreshHeaderLoading()">手动开始下拉刷新的加载状态</a>
  63.                 <a class="button" tapmode="active" onclick="fnrefreshHeaderLoadDone()">手动停止下拉刷新的加载状态</a>
  64.         </body>
  65.         <script type="text/javascript" src="../script/api.js"></script>
  66.         <script type="text/javascript">
  67.                 apiready = function() {
  68.                         api.setCustomRefreshHeaderInfo({
  69.                                 bgColor : '#eee',
  70.                                 images : ['widget://image/dropdown_anim_00.png', 'widget://image/dropdown_anim_01.png', 'widget://image/dropdown_anim_02.png', 'widget://image/dropdown_anim_03.png', 'widget://image/dropdown_anim_04.png', 'widget://image/dropdown_anim_05.png', 'widget://image/dropdown_anim_06.png','widget://image/dropdown_anim_07.png','widget://image/dropdown_anim_08.png','widget://image/dropdown_anim_09.png','widget://image/dropdown_anim_10.png'],
  71.                                 tips : {
  72.                                         pull : '下拉刷新',
  73.                                         threshold : '松开立即刷新',
  74.                                         load : '正在刷新'
  75.                                 }
  76.                         }, function() {
  77.                                 //下拉刷新被触发,自动进入加载状态,使用 api.refreshHeaderLoadDone() 手动结束加载中状态
  78.                                 //下拉刷新被触发,使用 api.refreshHeaderLoadDone() 结束加载中状态
  79.                                 alert('开始加载刷新数据,摇一摇停止加载状态');
  80.                                 api.addEventListener({
  81.                                         name : 'shake'
  82.                                 }, function(ret, err) {
  83.                                         api.refreshHeaderLoadDone()
  84.                                 });
  85.                         });
  86.                 };
  87.                 function fnRefreshHeaderLoading() {
  88.                         api.refreshHeaderLoading();
  89.                 }

  90.                 function fnrefreshHeaderLoadDone() {
  91.                         api.refreshHeaderLoadDone();
  92.                 }
  93.         </script>
  94. </html>
复制代码
UIPullRefreshMotive模块demo分享

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

职业车手

UID:441392

主题:
26
帖子:
2232
云币:
2559

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

发表于 2018-3-12 14:01:41 |

回帖奖励 +1

又没预览

马路杀手

UID:235644

主题:
10
帖子:
95
云币:
368

足球狗

发表于 2018-3-12 14:59:30 |

回帖奖励 +1

没图没真相啊。。。人工智能时代 大家截个图就那么忙,那么难吗???

主题:
3
帖子:
65
云币:
118

APICloud粉丝装逼侠狗年旺旺旺

发表于 2018-3-12 17:25:41 |

回帖奖励 +1

无图无真相啊

入门司机

UID:36764

主题:
49
帖子:
374
云币:
29958

中秋节托马斯全旋装逼侠我李白贼6

发表于 2018-3-13 14:32:42 |

回帖奖励 +1

有图有真相

主题:
57
帖子:
215
云币:
364

狗年旺旺旺

发表于 2018-3-15 03:14:04 |

回帖奖励 +1

有图有真相

驾校小白

UID:293268

主题:
0
帖子:
21
云币:
13
发表于 2018-3-15 13:19:57 |

回帖奖励 +1

有图有真相

主题:
33
帖子:
625
云币:
4975

APICloud粉丝女朋友儿童节快乐

发表于 2018-3-23 17:18:46 |

回帖奖励 +1


抢沙发。回帖拿金币,支持支持

马路杀手

UID:219869

主题:
15
帖子:
245
云币:
434
发表于 2018-3-23 19:01:06 |

回帖奖励 +1

感谢分享感谢分享

主题:
10
帖子:
54
云币:
58
发表于 2018-4-2 14:58:24 |

回帖奖励 +1


没图没真相啊。。。人工智能时代 大家截个图就那么忙,那么难吗???
123下一页
您需要登录后才可以回帖 登录 | 立即注册

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