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

最新推荐文章于 2022-10-02 16:09:41 发布

快应用官方博客

最新推荐文章于 2022-10-02 16:09:41 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/QuickApp/article/details/103268069

本文分享了在快应用中开发商城APP首页的实践经验，包括元素层级的处理、课程卡片标题折行问题的解决、搜索组件的设计、年级和地区弹层的实现、tabs换切功能的运用，以及show指令和其他布局问题的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源：快应用官方论坛

作者：学而思网校前端

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

实现首页

1. 元素层级

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

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

<stack>

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

</stack>

</div>

总结：随着组件越写越多，发现大部分都需要以一个 stack 元素作为最外层的container，这样写子元素时会有很多便利。但需要注意，一个组件尤其是子组件，最好在 stack 元素外层再多包一个 div元素作为最外层元素，不然会在组件结合的时候，遇到样式错乱的问题。

新版首页截图

2. 课程卡片

这里我们遇到了一个标题折行的问题，期望的展示方式是，主标题可以在最左则开始折行

但实际上，快应用的文本必须置于 text 元素下，标题左侧的小标签无法设置宽度。因为text 标签下只能使用 span 和 a 两种子元素，这两种子元素无法设置宽高和背景色，那么就只能展示纯文字了。

所以，我们想将标签放置于标题内部，当作h5的 inline-block元素来使用，就难以行得通，实际上快应用也不支持 inline-block 属性。

我们想到的解决办法，还是利用 stack 的思想，将真实标签和标题分离成两层。需要注意的是，标题层需要保留标签文本，因为最终还是需要这些文本来实现占位（只占位不显示，显示的是外层的真实标签）,代码如下：

<stack>
<text class="title">
<span class="item">拼团</span>
<span class="item">英语</span>
<span class="main">【2017-暑】英语直播中考高分班初一英语直播提高班（人教版）</span>
</text>
<div class="label">
<text class="item pintuan">拼团</text>
<text class="item english">英语</text>
</div>
</stack>

但问题是这些标签文本，无法设置宽度，我们就想到通过增大字号，来让标题内部的标签文本宽度大体上和外层真实的标签大致相同，从而解决标题自动换行的问题。

快应用的元素和组件，很多时候不同于h5。比如，span是格式化的文本，只能作为text、a和span的子组件，等等，使用时需要认真阅读官方文档

3. 搜索组件

搜索组件一共分三部分，左侧是年级筛选，右侧为地区筛选，中间是自适应宽度的搜索框。

快应用元素默认都是flex布局，左右侧两个子元素都是固定宽度，所以需要让中间的子元素（搜索框）来自适应宽度，只需要加一个 flex-grow: 1 属性，这意味着搜索框可放大，如果值为0则存在剩余空间也不会放大。

4. 年级和地区弹层

快应用支持以animation的方式添加进场动效，只需要在弹层组件外层添加一个 translate 的类名即可。

写出场动效需要注意，添加完 translate 出场类名后，需要在动画执行（比如1s）后再销毁或隐藏弹层组件。

年级选项的布局，我们使用了 justify-content: space-between; 属性，每一行正常都会展示3个选项，但如果只有2个时（一般在最后一行），就会变成左右布局，中间空了一项。这实际上是一个flex布局的通病，我们的解决办法是在数据上做了抹平，以空元素进行占位，但不显示空元素。下图为占位元素，实际情况下需做透明处理。