apicloud apicloud

注册
查看: 15132|回复: 17

[新手教程] 从1开始学晋城(二) —— 首页main部分

主题:
28
帖子:
88
云币:
757

[新手教程] 从1开始学晋城(二) —— 首页main部分

15132 17 | 发表于 2014-12-1 20:09:25 |阅读模式 | |
本帖最后由 老邮局 于 2015-7-23 20:47 编辑

》》更多视频教程请关注 www.9y.cm《《



上一篇我们说道底部导航栏中的openTab(),用于打开不同的header和main,这里我们说“首页”中main部分:

1、首页中的main可以分为三个部分:幻灯片(红色)、常用分类(蓝色)、活动分类(绿色)
2、蓝色部分界面是固定的,我们使用本地图片写死在程序里面
3、红色和绿色部分,我们希望可以根据服务器内容实时的更新。

首先蓝色部分我们按下不表,“脉脉”中已经表过啦;我们的主要精力放在幻灯片部分。








红色部分(幻灯片):
简要描述下数据调用过程:
1、连接服务器,查询数据库并返回
        当首次初始化此页面,会调用getData(), 函数会链接到服务器,查询数据库中的数据返回到程序中进行显示。由于数据是动态的,所以html中我们就不能写死,要用变量代替,以便数据进行替换。
main.js
  1. 40  function getData(){
  2. 41          api.showProgress({
  3. 42                  title:'加载中',
  4. 43                  model:false
  5. 44          });
  6. 45
  7. 46          var model = api.require('model');       //
  8. 47          var query = api.require('query');
  9. 48
  10. 49        model.config({
  11. 50                appKey:'02***07C-****-C2FF-****-F816****D17A',                 //appKey,apicloud后台可获得
  12. 51                host:'https://d.apicloud.com'
  13. 52        });
  14. 53        query.createQuery(function(ret,err){
  15. 54                if (ret && ret.qid){                                                                            // 如果成功返回句柄ret.qid
  16. 55                        var queryId = ret.qid;
  17. 56                        model.findAll({class:"activity",qid:queryId},function(ret,err){// 查询表activity中所有内容
  18. 57                               if (ret){
  19. 58                                        var content = $api.byId('act-content');                  // 获取幻灯片显示容器
  20. 59                                        var tpl = $api.byId('act-template').text;                 // 获取模板引擎的内容,以便21行进行模板的编译,后面会说
  21. 60                                        var tempFn = doT.template(tpl);                            // 根据模板的内容,进行编译,其实就是生成一个匿名函数
  22. 61                                        content.innerHTML = tempFn(ret);                        // 根据实际数据,填充模板
  23. 62
  24. 63                                        api.hideProgress();
  25. 64                                }else{
  26. 65                                        //error
  27. 66                               }
  28. 67                        });
  29. 68                }
  30. 69        });
  31. 70  }
复制代码

getData()完成了连接服务器数据库,查询数据并返回。就固定这么写的,几个api调用。
行18中,ret变量就是查询后服务器返回的数据:

一个标准json格式的对象数组


2、经模板引擎生成静态html内容
        第一步中,服务器返回了数据ret,紧接着交给模板引擎进行渲染(行58-61),就是按照模板中的定义进行数据的格式化输出。
(我们引用的是第三方的模板引擎doT.js)
main.html
  1. 14 <script type="text/javascript" src="../script/doT.min.js"></script>
复制代码
我们先看下模板怎么定义的
main.html
  1. 15  <script id="banner-template" type="text/x-dot-template">   
  2. 16          {{ for(var i=0; i<it.length; i++) { }}
  3. 17                  <div>
  4. 18                          <img src="{{=it[i].poster.url}}" />
  5. 19                          <label><div class="blur"></div>{{=it[i].title}}</label>
  6. 20                   </div>
  7. 21          {{ } }}
  8. 22  </script>
  9. 23  <div id='slide' class='swipe'>
  10. 24          <div class='swipe-wrap' id="banner-content">    // 这个div是幻灯片的容器
  11. 25          </div>
  12. 26          <ul id="pointer">
  13. 27                  <li><a class="active"></a></li>
  14. 28                  <li><a></a></li>
  15. 29                  <li><a></a></li>
  16. 30          </ul>
  17. 31  </div>
复制代码
行15-22定义模板,前面提到的getData()会将返回的json数据传递给模板引擎,然后根据返回数据的条数(it.length)生成对应数量的div
行24是幻灯片的div,上一步生成的div全部要放到这个div容器中。


还是云里雾里的哈,我们看看模板引擎到底是如何使用和工作(行58-61):

1、在html中定义模板引擎,包括模板(行15-21)、用于显示模板的容器(行24)
2、在js中,找到用于显示模板的容器,然后将模板编译的内容塞进容器中。

main.js
  1. 58  var content = $api.byId('act-content');         // 找到用于显示模板的容器
  2. 59  var tpl = $api.byId('act-template').text;        // 找到模板变量
  3. 60  var tempFn = doT.template(tpl);                   // 进行模板的编译(生成匿名函数,用于处理生成最终html)
  4. 61  content.innerHtml = tempFn(ret);                 // 根据所给数据组装成静态的html
复制代码
(行60) , 进行模板编译,将会生成如下函数:
  1. function anonymous(it) {
  2.         var out='';
  3.         for(var i=0; i<it.length; i++) {
  4.                 out+=' <div> <img src="'+(it[i].poster.url)+'" /> <label><div class="blur"></div>'+(it[i].title)+'</label> </div>';
  5.         }
  6.         return out;
  7. }
复制代码
(行61),进行赋值,最终生成静态的html代码:
main.html
  1. 30  <div id='slide' class='swipe'>
  2.               <div class='swipe-wrap' id="banner-content">    //幻灯片
  3.                       <div>       // 第一张幻灯片,包括图片和标题
  4.                               <img src="http://file.apicloud.com" />
  5.                               <label><div class="blur"></div>APICloud</label>
  6.                       </div>
  7.                       <div>       // 第二张幻灯片
  8.                               <img src="http://www.0hi.cn" />
  9.                               <label><div class="blur"></div>0hi猿团</label>
  10.                       </div>
  11.                       <div>       // 第三张幻灯片
  12.                               <img src="http://。。。" />
  13.                               <label><div class="blur"></div>毛豆</label>
  14.                       </div>
  15.                </div>
  16.           ..........................
  17.       </div>
复制代码
Sorry,我还没完呢,我们再来做幻灯片右下角那个小导航:
main.html
  1. 33 <ul id="pointer">
  2. 34         <li><a class="active"></a></li>
  3. 35         <li><a></a></li>
  4. 36         <li><a></a></li>
  5. 37 </ul>
复制代码
main.js
  1. 1  function initSlide(){
  2. 2          var slide = $api.byId('slide');
  3. 3          var pointer = $api.domAll('#pointer a');
  4. 4          window.mySlide = Swipe(slide, {  // 初始化 swipe.js
  5. 5          // startSlide: 2,                                // 起始幻灯片        
  6. 6          auto: 3000,                                      // 自动切换时间间隔
  7. 7          continuous: true,                            // 是否循环滑动,默认值为true
  8. 8          disableScroll: true,                          // 停止任何触及此容器上滚动页面,默认值flase
  9. 9          stopPropagation: true,                   // 停止事件传播
  10. 10        callback: function(index, element) {
  11. 11                var actPoint = $api.dom('#pointer a.active');     // 前一个被激活的小圆点
  12. 12                $api.removeCls(actPoint,'active');                        // 去掉激活样式
  13. 13                $api.addCls(pointer[index],'active');                    // 添加激活样式
  14. 14        },
  15. 15                transitionEnd: function(index, element) {          // 滑动过渡时调用的函数
  16. 16
  17. 17                }
  18. 18        });
  19. 19  }
复制代码


另外,大家注意到没有,apicloud的端api中有一个幻灯片实现scrollPicture组件,这里并没有采用,而是引入第三方的幻灯片插件swipe.js。主要原因在于scrollPicture组件会浮动在页面上,不会随页面下拉而下拉,所以咯。。。运行swipe.js非常简单,三步走:
1、html中布局
  1. <div id='slider' class='swipe'>
  2.         <div class='swipe-wrap'>
  3.                 <div>APICloud</div>
  4.                 <div>0hi猿团</div>
  5.                 <div>毛豆</div>
  6.         </div>
  7. </div>
复制代码
2、js中添加时间代码
  1. window.mySwipe = Swipe(document.getElementById('slider'));
复制代码
3、css中添加基本样式:
  1. .swipe {
  2.         overflow: hidden;
  3.         visibility: hidden;
  4.         position: relative;
  5. }
  6. .swipe-wrap {
  7.         overflow: hidden;
  8.         position: relative;
  9. }
  10. .swipe-wrap > div {
  11.         float:left;
  12.         width:100%;
  13.         position: relative;
  14. }
复制代码



文章导航:
从1开始学晋城(一) —— 概览
从1开始学晋城(二) —— 首页main部分
从1开始学晋城(三) —— 蓝色样式

从1开始学晋城(四) —— 热门活动
从1开始学晋城(五) —— 下拉菜单

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

1

查看全部评分

主题:
6
帖子:
288
云币:
3082

版主勋章端午节

发表于 2014-12-1 20:18:21 |
楼主很有探索精神呀,还很有毅力,不错

驾校小白

UID:13595

主题:
3
帖子:
18
云币:
21
发表于 2014-12-2 11:59:00 |
  继续继续~!~~  等第三季!

主题:
41
帖子:
287
云币:
1474
发表于 2014-12-2 14:42:02 |
顶楼主!
个人博客:http://hanc.cc

主题:
28
帖子:
521
云币:
85900011

APICloud粉丝端午节

发表于 2014-12-2 17:49:26 |

主题:
3
帖子:
11
云币:
39
发表于 2014-12-5 22:24:54 |
支持一下,毛豆不错
0HI.CN猿团成员_APiCloud程序猿社交化知识社区

驾校小白

UID:56821

主题:
0
帖子:
1
云币:
6
发表于 2015-4-22 14:28:44 |
有点错误哦

主题:
8
帖子:
363
云币:
2726

APICloud粉丝

发表于 2015-7-8 18:40:38 |
好东西,赞一下

驾校小白

UID:166352

主题:
0
帖子:
15
云币:
23
发表于 2015-9-26 15:40:28 |
谢谢分享

驾校小白

UID:175005

主题:
0
帖子:
1
云币:
2
发表于 2015-10-10 12:59:05 |
图片会自动被缓存吗? 离线时也可以看到图片么?
12下一页
您需要登录后才可以回帖 登录 | 立即注册

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