1. 本地存儲(chǔ)(H5 LocalStorage)
在商品列表頁(yè)中以?xún)煞N方式展現(xiàn)商品列表,一種是單列列表,一種是雙列列表。單列列表中的商品圖片比雙列列表中的圖片小,但是一屏顯示的商品數(shù)量比雙列列表顯示的商品數(shù)量多。采用單列列表還是雙列列表屬于個(gè)人偏好,將這種偏好記錄下來(lái),再次打開(kāi)商品列表頁(yè)時(shí),應(yīng)用個(gè)人偏好,這樣處理用戶(hù)體驗(yàn)更好。
商品列表頁(yè)中使用多內(nèi)容頁(yè)組件contents,內(nèi)置兩個(gè)內(nèi)容頁(yè)content,分別顯示單列列表和雙列列表,盡管使用了不同的list組件,但都是指向同一個(gè)商品數(shù)據(jù)組件,因此切換列表形式時(shí),不需要從數(shù)據(jù)庫(kù)重新加載數(shù)據(jù),只需重新渲染界面。
個(gè)人偏好的本地存儲(chǔ)使用H5提供的LocalStorage實(shí)現(xiàn)。在商品列表頁(yè)的加載事件中,從本地存儲(chǔ)中取出個(gè)人偏好,并應(yīng)用上;在頁(yè)面的卸載事件中將個(gè)人偏好存入本地存儲(chǔ)中,用于下次打開(kāi)商品列表頁(yè)時(shí)使用。
商品列表頁(yè)list.js中使用本地存儲(chǔ)的代碼:
Model.prototype.modelLoad = function(event) { // 頁(yè)面加載事件
var pagename = localStorage.getItem("list_style_name");//從本地存儲(chǔ)中取出個(gè)人偏好
if (pagename == null){
pagename ="oneColList";
}
this.comp("pages").to(pagename); //切換到個(gè)人偏好
};
Model.prototype.modelUnLoad = function(event) { // 卸載頁(yè)面事件
//將個(gè)人偏好存入本地存儲(chǔ)中
localStorage.setItem("list_style_name",this.comp("pages").getActiveXid());
};
2. 使用遮罩
遮罩的運(yùn)行效果如圖1-42.
圖1-42 仿淘寶App商品列表頁(yè)中的遮罩效果
當(dāng)需要將頁(yè)面的全部或局部進(jìn)行遮蓋時(shí),就使用遮罩組件popOver。popOver可以設(shè)置遮罩顯示的位置、設(shè)置遮罩的透明度、設(shè)置在遮罩上顯示的內(nèi)容。在遮罩上的非顯示內(nèi)容區(qū)域單擊可以關(guān)閉遮罩,也可以寫(xiě)JS代碼關(guān)閉遮罩。遮罩的界面設(shè)計(jì)如圖1-43.
圖1-43 仿淘寶App商品列表頁(yè)中遮罩設(shè)計(jì)界面
商品列表頁(yè)中,單擊“綜合排序”和“篩選”,分別會(huì)彈出一個(gè)不同的遮罩,因此在W文件上放兩個(gè)popOver組件實(shí)現(xiàn)。popOver組件的位置position、??课恢胊nchor、??糠较騞irection等屬性控制遮罩的顯示位置;透明率opacity屬性控制遮罩的透明度;在popOver 的第二個(gè)div中擺放組件,會(huì)作為遮罩的顯示內(nèi)容,跟隨遮罩一起顯示。
更多建議: