快应用开发商城app的实践分享 - 实现首页

来源：快应用官方论坛

作者：学而思网校前端

快应用开发商城APP的实践分享

实现首页

1. 元素层级

快应用元素的position属性仅支持 fixed 布局，且不支持 z-index 属性，所以需要借助 stack 元素来实现吸顶、吸底、遮罩、弹层等层叠布局，通过元素的先后顺序，来确认其优先级，越写在后边的元素优先级越高。

由于吸顶和吸底功能需要使用 position:fixed 布局，如果在stack写一个页面弹层，它是无法覆盖吸顶和吸底的。所以需要将弹层元素也设置为position: fixed，这样它的优先级（因为在stack中，它位于吸顶和吸底元素之后）就超过了吸顶和吸底。代码如下：

<div class="wrap translate">

  <stack>

      <refresh>...因为有下拉刷新，主页面内容置于refresh组件中</refresh>

      <div class="select">...头部筛选</div>

      <div class="fixedTop">...吸顶</div>

      <div class="footer">...吸底</div>

  </stack>

</div>

总结：随着组件越写越多&#x