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