WeX5 首頁
1. 圖片輪播
Bootstrap提供了圖片輪播組件 carousel，carousel可以預(yù)置幾張圖片，也支持使用add方法動態(tài)增加圖片。仿淘寶提供動態(tài)更新圖片的能力，具體做法是預(yù)置一張圖片，用于快速顯示，再從服務(wù)端獲取新的圖片，動態(tài)增加到carousel中。界面設(shè)計(jì)如圖1-38.
圖1-38 仿淘寶App首頁中carousel設(shè)計(jì)界面
在數(shù)據(jù)模型創(chuàng)建之前的事件中，即model組件的onModelConstruct事件中，設(shè)置預(yù)留圖片的src，用于快速顯示圖片。在新的圖片數(shù)據(jù)刷新之后，修改預(yù)置圖片的src指向新的圖片，并增加其他的新圖片。仿淘寶首頁main.w中的代碼如下：
Model.prototype.modelModelConstruct = function(event) { //數(shù)據(jù)模型創(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) { //獲取新的圖片數(shù)據(jù)
var url = require.toUrl("./main/json/imgData.json");
allData.loadDataFromFile(url,event.source, true); //加載新的圖片數(shù)據(jù)
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) { //修改預(yù)置圖片的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. 二級門戶圖標(biāo)
從“天貓”、“聚劃算”到“寶箱”、“分類”的這十個圖標(biāo)，稱為二級門戶圖標(biāo)，以兩行，五列的形式展現(xiàn)，單擊其中的圖標(biāo)打開相應(yīng)的二級門戶頁面。界面設(shè)計(jì)如圖1-39.
圖1-39 仿淘寶App首頁中二級門戶圖標(biāo)設(shè)計(jì)界面
使用Bootstrap 的table組件實(shí)現(xiàn)。在table中增加兩行tr，每行增加五列td，每個td里面用image組件顯示二級門戶圖標(biāo)，用span組件顯示二級門戶名稱。在td的單擊事件中寫代碼打開二級門戶頁面。
3. 廣告欄
由“淘搶購”、“有好貨”、“愛逛街”和“每日首發(fā)”形成了一個廣告欄。在電商首頁中，這種形式的廣告欄比比皆是。通過學(xué)習(xí)制作這種廣告欄的方法，掌握Bootstrap 的row組件的原理，舉一反三可以制作出其他形式的廣告欄。界面設(shè)計(jì)如圖1-40.
圖1-40 仿淘寶App首頁中廣告欄設(shè)計(jì)界面
觀察廣告欄，一個廣告欄就是一行，把這一行分為左右兩列，左列中放“淘搶購”，右列中分為上下兩行，上面的行里面放“有好貨”，下面的行里面再分成兩列，分別放“愛逛街”和“每日首發(fā)”。這樣就形成了這種廣告欄的格局。
接下來需要設(shè)置列的寬度，圖片的寬度在設(shè)置為100%后，會根據(jù)所在列的寬度進(jìn)行自適應(yīng)，即列的高度由自適應(yīng)后的圖片的高度決定。Bootstrap在實(shí)現(xiàn)響應(yīng)式布局時，使用行組件row(bootstrap)，將row的寬度分為十二等份，通過樣式設(shè)置每列占其中的幾等份。占一等份的樣式是col-xs-1，占兩等份的樣式是col-xs-2，以此類推占滿一行的樣式是col-xs-12，一行中不管有幾列，他們的寬度樣式加起來等于十二，就說明這幾列會顯示在一行中。
在這個廣告欄中的四列都需要設(shè)置寬度樣式，從效果上看，“淘搶購”所在的列應(yīng)該設(shè)置樣式為col-xs-5，表示占五等份，與之對應(yīng)的右列占七等份，樣式設(shè)置為col-xs-7。右列中又分為兩行，上面一行“有好貨”占滿一行，設(shè)置列的樣式為col-xs-12，下面一行中“愛逛街”和“每日首發(fā)”的寬度相同，各占六等份，樣式都設(shè)置為col-xs-6。這些樣式設(shè)置在列col的class屬性上。
4. 雙列列表
在“1.5.1 開發(fā)賬目列表”一節(jié)中，使用list組件顯示賬目列表，一行顯示一個賬目信息，這種列表稱為單列列表。即在一行中顯示一個商品信息，就是單列列表，把一行分為左右兩列，分別顯示兩個商品信息，就是雙列列表。運(yùn)行效果如圖1-41.
圖1-41 仿淘寶App首頁中的雙列列表
通過學(xué)習(xí)制作廣告欄，發(fā)現(xiàn)Bootstrap提供了設(shè)置列寬占比的樣式，只需給list組件的li增加col-xs-6樣式，單列列表即刻變成雙列列表。
更多建議：