WeX5 商品列表頁

1. 本地存儲（H5 LocalStorage）

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

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

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

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

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

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

              if (pagename == null){

                     pagename ="oneColList";

              }

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

       };

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

              //將個人偏好存入本地存儲中

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

       };

2. 使用遮罩

遮罩的運行效果如圖1-42.

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

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

圖1-43 仿淘寶App商品列表頁中遮罩設計界面

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