WeX5 商品列表页

1. 本地存储（H5 LocalStorage）

在商品列表页中以两种方式展现商品列表，一种是单列列表，一种是双列列表。单列列表中的商品图片比双列列表中的图片小，但是一屏显示的商品数量比双列列表显示的商品数量多。采用单列列表还是双列列表属于个人偏好，将这种偏好记录下来，再次打开商品列表页时，应用个人偏好，这样处理用户体验更好。

商品列表页中使用多内容页组件contents，内置两个内容页content，分别显示单列列表和双列列表，尽管使用了不同的list组件，但都是指向同一个商品数据组件，因此切换列表形式时，不需要从数据库重新加载数据，只需重新渲染界面。

个人偏好的本地存储使用H5提供的LocalStorage实现。在商品列表页的加载事件中，从本地存储中取出个人偏好，并应用上；在页面的卸载事件中将个人偏好存入本地存储中，用于下次打开商品列表页时使用。

商品列表页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可以设置遮罩显示的位置、设置遮罩的透明度、设置在遮罩上显示的内容。在遮罩上的非显示内容区域单击可以关闭遮罩，也可以写JS代码关闭遮罩。遮罩的界面设计如图1-43.

图1-43 仿淘宝App商品列表页中遮罩设计界面

    商品列表页中，单击“综合排序”和“筛选”，分别会弹出一个不同的遮罩，因此在W文件上放两个popOver组件实现。popOver组件的位置position、停靠位置anchor、停靠方向direction等属性控制遮罩的显示位置；透明率opacity属性控制遮罩的透明度；在popOver 的第二个div中摆放组件，会作为遮罩的显示内容，跟随遮罩一起显示。