仿淘宝移动端案例布局

【学习目标】
通过学习仿淘宝App，掌握使用向导生成一个应用，初步了解图片轮播、二级门户图标、广告栏、双列列表、本地存储（H5 LocalStorage）以及遮罩的使用。
【案例说明】
仿淘宝App是一款模仿淘宝App界面风格的软件，提供首页、商品分类页、搜索页、商品列表页、商品详细页、购物车页等页面，数据使用静态数据。运行效果如图1-37.
开发App的完整过程参考1.3.2  开发过程一节。首先新建一个应用taobao。再新建一个W文件，在“新建W向导”中选择模板 “移动→应用→仿淘宝”，文件名输入index，就在taobao目录下建出了完整的仿淘宝应用。下面介绍首页main.w和列表页list.w上常用的功能是如何实现的。

1.7.1 首页

1. 图片轮播


Bootstrap提供了图片轮播组件 carousel，carousel可以预置几张图片，也支持使用add方法动态增加图片。仿淘宝提供动态更新图片的能力，具体做法是预置一张图片，用于快速显示，再从服务端获取新的图片，动态增加到carousel中。
 
在数据模型创建之前的事件中，即model组件的onModelConstruct事件中，设置预留图片的src，用于快速显示图片。在新的图片数据刷新之后，修改预置图片的src指向新的图片，并增加其他的新图片。仿淘宝首页main.w中的代码如下：
  
       Model.prototype.modelModelConstruct = function(event) {     //数据模型创建之前事件
              var carousel = this.comp("carousel1");
              var fImgUrl =localStorage.getItem("index_BannerImg_src");
              if (fImgUrl == undefined){                          //第一次使用，显示指定图片
                     $(carousel.domNode).find("img").eq(0).attr({
                            "src" :"./main/img/carouselBox61.jpg",
                            "goodsID": "1",
                            "pagename": "./detail.w"
                     });
              } else {                                          //显示上次看过的图片
                     var fUrl = localStorage.getItem("index_BannerImg_url");
                     $(carousel.domNode).find("img").eq(0).attr({
                            "src" :fImgUrl,
                            "pagename": fUrl
                     });
              }
       };
   
       Model.prototype.imgDataCustomRefresh = function(event) {  //获取新的图片数据
              var url = require.toUrl("./main/json/imgData.json");  
              allData.loadDataFromFile(url,event.source, true);       //加载新的图片数据
 
              var carousel = this.comp("carousel1");
              event.source.each(function(obj) {
                     var fImgUrl = require.toUrl(obj.row.val("fImgUrl"));
                     var fUrl = require.toUrl(obj.row.val("fUrl"));
                     if (obj.index == 0) {     //修改预置图片的src，指向新图片，并存储起来下次用
                            localStorage.setItem("index_BannerImg_src",fImgUrl);
                            localStorage.setItem("index_BannerImg_url",fUrl);
                            $(carousel.domNode).find("img").eq(obj.index).attr({
                                   "src": fImgUrl,
                                   "pagename": fUrl
                            });
                     } else {                                    //增加新的图片
                            carousel.add('');
                     }
              });
       };
 
2. 二级门户图标
从“天猫”、“聚划算”到“宝箱”、“分类”的这十个图标，称为二级门户图标，以两行，五列的形式展现，单击其中的图标打开相应的二级门户页面。
使用Bootstrap 的table组件实现。在table中增加两行tr，每行增加五列td，每个td里面用image组件显示二级门户图标，用span组件显示二级门户名称。在td的单击事件中写代码打开二级门户页面。
 
3. 广告栏
由“淘抢购”、“有好货”、“爱逛街”和“每日首发”形成了一个广告栏。在电商首页中，这种形式的广告栏比比皆是。通过学习制作这种广告栏的方法，掌握Bootstrap 的row组件的原理，举一反三可以制作出其他形式的广告栏。界面设计如图1-40.
观察广告栏，一个广告栏就是一行，把这一行分为左右两列，左列中放“淘抢购”，右列中分为上下两行，上面的行里面放“有好货”，下面的行里面再分成两列，分别放“爱逛街”和“每日首发”。这样就形成了这种广告栏的格局。
接下来需要设置列的宽度，图片的宽度在设置为100%后，会根据所在列的宽度进行自适应，即列的高度由自适应后的图片的高度决定。Bootstrap在实现响应式布局时，使用行组件row(bootstrap)，将row的宽度分为十二等份，通过样式设置每列占其中的几等份。占一等份的样式是col-xs-1，占两等份的样式是col-xs-2，以此类推占满一行的样式是col-xs-12，一行中不管有几列，他们的宽度样式加起来等于十二，就说明这几列会显示在一行中。
在这个广告栏中的四列都需要设置宽度样式，从效果上看，“淘抢购”所在的列应该设置样式为col-xs-5，表示占五等份，与之对应的右列占七等份，样式设置为col-xs-7。右列中又分为两行，上面一行“有好货”占满一行，设置列的样式为col-xs-12，下面一行中“爱逛街”和“每日首发”的宽度相同，各占六等份，样式都设置为col-xs-6。这些样式设置在列col的class属性上。
 
4. 双列列表
在“1.5.1 开发账目列表”一节中，使用list组件显示账目列表，一行显示一个账目信息，这种列表称为单列列表。即在一行中显示一个商品信息，就是单列列表，把一行分为左右两列，分别显示两个商品信息，就是双列列表。
 
通过学习制作广告栏，发现Bootstrap提供了设置列宽占比的样式，只需给list组件的li增加col-xs-6样式，单列列表即刻变成双列列表。