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

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

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

来源:快应用官方论坛

作者:学而思网校前端

快应用开发商城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>

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

新版首页截图

2. 课程卡片

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

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

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

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

  1. <stack>

  2. <text class="title">

  3. <span class="item">拼团</span>

  4. <span class="item">英语</span>

  5. <span class="main">【2017-暑】英语直播中考高分班 初一英语直播提高班(人教版)</span>

  6. </text>

  7. <div class="label">

  8. <text class="item pintuan">拼团</text>

  9. <text class="item english">英语</text>

  10. </div>

  11. </stack>

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

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

3. 搜索组件

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

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

4. 年级和地区弹层


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

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

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

5. tabs换切


首页最核心的功能,就是进行tabs的切换来加载不同的数据列表。这里使用官方的 refresh 和 tabs 组件,需要注意的是,refresh 组件需要套在 tabs 组件外层使用。如图:

还有一点就是,tabs 组件切换时,需要调用接口刷新数据,这里需要做一个全局的数据缓存,如果是请求过的页面,就不再重新加载了,除非进行手动刷新才更新数据。

6. show指令的用法

组件的最外层元素上不可使用show和if。另外,stack元素上不可使用show,但可以使用if。

1050+版本中,show 指令开始支持在自定义组件上进行声明,当这样使用时,等同于在该自定义子组件的根节点上使用 show 指令。

对于之前版本,自定义组件不支持 show 指令的需求,可以通过 props 传入参数,在自己内部使用 show 来控制是否可见。

show指令的条件,如果是空字符串,则会被判为存在,要小心使用。

7. 其它布局问题

7.1 border-box

flex没有 border-box: box-sizing 属性。

7.2 图片点击区域

img标签的区域会包括 padding 的范围,所以要扩大点击区的域的话,最好把事件加在一个wrap元素上。

7.3 list组件

list的子元素 list-item 和 div 不要并列使用,外层要统一为 list-item 标签。

7.4 block透明节点元素

可以使用<block>实现更为灵活的循环/条件渲染。要注意<block>目前只支持 for 和 if/elif/else 属性。

7.5 text设置行高

如果 text 下有 span 等子元素,那么必须将 line-height 属性设置在span上才能生效。如果 text下没有子元素,则可以直接设置。

7.6 border-bottom-left-radius

该属性在预览开发模式无效,但在真机上调试时正常,因为预览模式和真机上运行的代码是不同的编译结果,所以肯定会有一些细节差异。但是为了快速开发的需要,我们必须保证项目在ide预览模式下大致可用,这样就不用每次都进行直机调试了。

扫码关注,敬请期待快应用更多精彩内容!

快应用生态平台

赋能开发者 

拓展场景未来

快来关注我们吧

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值