WeX5 商品列表頁

1. 本地存儲（H5 LocalStorage）

在商品列表頁中以兩種方式展現(xiàn)商品列表，一種是單列列表，一種是雙列列表。單列列表中的商品圖片比雙列列表中的圖片小，但是一屏顯示的商品數(shù)量比雙列列表顯示的商品數(shù)量多。采用單列列表還是雙列列表屬于個(gè)人偏好，將這種偏好記錄下來，再次打開商品列表頁時(shí)，應(yīng)用個(gè)人偏好，這樣處理用戶體驗(yàn)更好。

商品列表頁中使用多內(nèi)容頁組件contents，內(nèi)置兩個(gè)內(nèi)容頁content，分別顯示單列列表和雙列列表，盡管使用了不同的list組件，但都是指向同一個(gè)商品數(shù)據(jù)組件，因此切換列表形式時(shí)，不需要從數(shù)據(jù)庫重新加載數(shù)據(jù)，只需重新渲染界面。

個(gè)人偏好的本地存儲使用H5提供的LocalStorage實(shí)現(xiàn)。在商品列表頁的加載事件中，從本地存儲中取出個(gè)人偏好，并應(yīng)用上；在頁面的卸載事件中將個(gè)人偏好存入本地存儲中，用于下次打開商品列表頁時(shí)使用。

商品列表頁list.js中使用本地存儲的代碼：

       Model.prototype.modelLoad = function(event) {           // 頁面加載事件

              var pagename = localStorage.getItem("list_style_name");//從本地存儲中取出個(gè)人偏好

              if (pagename == null){

                     pagename ="oneColList";

              }

              this.comp("pages").to(pagename);                  //切換到個(gè)人偏好

       };

       Model.prototype.modelUnLoad = function(event) {        // 卸載頁面事件

              //將個(gè)人偏好存入本地存儲中

              localStorage.setItem("list_style_name",this.comp("pages").getActiveXid());

       };

2. 使用遮罩

遮罩的運(yùn)行效果如圖1-42.

圖1-42  仿淘寶App商品列表頁中的遮罩效果

    當(dāng)需要將頁面的全部或局部進(jìn)行遮蓋時(shí)，就使用遮罩組件popOver。popOver可以設(shè)置遮罩顯示的位置、設(shè)置遮罩的透明度、設(shè)置在遮罩上顯示的內(nèi)容。在遮罩上的非顯示內(nèi)容區(qū)域單擊可以關(guān)閉遮罩，也可以寫JS代碼關(guān)閉遮罩。遮罩的界面設(shè)計(jì)如圖1-43.

圖1-43 仿淘寶App商品列表頁中遮罩設(shè)計(jì)界面

    商品列表頁中，單擊“綜合排序”和“篩選”，分別會(huì)彈出一個(gè)不同的遮罩，因此在W文件上放兩個(gè)popOver組件實(shí)現(xiàn)。popOver組件的位置position、?？课恢胊nchor、?？糠较騞irection等屬性控制遮罩的顯示位置；透明率opacity屬性控制遮罩的透明度；在popOver 的第二個(gè)div中擺放組件，會(huì)作為遮罩的顯示內(nèi)容，跟隨遮罩一起顯示。