WeX5 首頁

1. 圖片輪播

Bootstrap提供了圖片輪播組件 carousel，carousel可以預置幾張圖片，也支持使用add方法動態(tài)增加圖片。仿淘寶提供動態(tài)更新圖片的能力，具體做法是預置一張圖片，用于快速顯示，再從服務端獲取新的圖片，動態(tài)增加到carousel中。界面設計如圖1-38.

圖1-38  仿淘寶App首頁中carousel設計界面

 在數據模型創(chuàng)建之前的事件中，即model組件的onModelConstruct事件中，設置預留圖片的src，用于快速顯示圖片。在新的圖片數據刷新之后，修改預置圖片的src指向新的圖片，并增加其他的新圖片。仿淘寶首頁main.w中的代碼如下：

       Model.prototype.modelModelConstruct = function(event) {     //數據模型創(chuàng)建之前事件

              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('<imgsrc="' + fImgUrl + '" class="tb-img1"bind-click="openPageClick" pagename="' + fUrl + '"/>');

                     }

              });

       };

2. 二級門戶圖標

從“天貓”、“聚劃算”到“寶箱”、“分類”的這十個圖標，稱為二級門戶圖標，以兩行，五列的形式展現，單擊其中的圖標打開相應的二級門戶頁面。界面設計如圖1-39.

圖1-39  仿淘寶App首頁中二級門戶圖標設計界面

使用Bootstrap 的table組件實現。在table中增加兩行tr，每行增加五列td，每個td里面用image組件顯示二級門戶圖標，用span組件顯示二級門戶名稱。在td的單擊事件中寫代碼打開二級門戶頁面。

3. 廣告欄

由“淘搶購”、“有好貨”、“愛逛街”和“每日首發(fā)”形成了一個廣告欄。在電商首頁中，這種形式的廣告欄比比皆是。通過學習制作這種廣告欄的方法，掌握Bootstrap 的row組件的原理，舉一反三可以制作出其他形式的廣告欄。界面設計如圖1-40.

圖1-40  仿淘寶App首頁中廣告欄設計界面

觀察廣告欄，一個廣告欄就是一行，把這一行分為左右兩列，左列中放“淘搶購”，右列中分為上下兩行，上面的行里面放“有好貨”，下面的行里面再分成兩列，分別放“愛逛街”和“每日首發(fā)”。這樣就形成了這種廣告欄的格局。

接下來需要設置列的寬度，圖片的寬度在設置為100%后，會根據所在列的寬度進行自適應，即列的高度由自適應后的圖片的高度決定。Bootstrap在實現響應式布局時，使用行組件row(bootstrap)，將row的寬度分為十二等份，通過樣式設置每列占其中的幾等份。占一等份的樣式是col-xs-1，占兩等份的樣式是col-xs-2，以此類推占滿一行的樣式是col-xs-12，一行中不管有幾列，他們的寬度樣式加起來等于十二，就說明這幾列會顯示在一行中。

在這個廣告欄中的四列都需要設置寬度樣式，從效果上看，“淘搶購”所在的列應該設置樣式為col-xs-5，表示占五等份，與之對應的右列占七等份，樣式設置為col-xs-7。右列中又分為兩行，上面一行“有好貨”占滿一行，設置列的樣式為col-xs-12，下面一行中“愛逛街”和“每日首發(fā)”的寬度相同，各占六等份，樣式都設置為col-xs-6。這些樣式設置在列col的class屬性上。

4. 雙列列表

在“1.5.1 開發(fā)賬目列表”一節(jié)中，使用list組件顯示賬目列表，一行顯示一個賬目信息，這種列表稱為單列列表。即在一行中顯示一個商品信息，就是單列列表，把一行分為左右兩列，分別顯示兩個商品信息，就是雙列列表。運行效果如圖1-41.

圖1-41  仿淘寶App首頁中的雙列列表

通過學習制作廣告欄，發(fā)現Bootstrap提供了設置列寬占比的樣式，只需給list組件的li增加col-xs-6樣式，單列列表即刻變成雙列列表。