|
|
|
本帖最后由 banyongji 于 2019-11-26 13:07 编辑
实现首页
商城快应用新首页
新首页截图
1 元素层级
快应用元素的position属性仅支持 fixed 布局，且不支持 z-index 属性，所以需要借助 stack 元素来实现吸顶、吸底、遮罩、弹层等层叠布局，通过元素的先后顺序，来确认其优先级，越写在后边的元素优先级越高。
由于吸顶和吸底功能需要使用 position:fixed 布局，如果在stack写一个页面弹层，它是无法覆盖吸顶和吸底的。所以需要将弹层元素也设置为position: fixed，这样它的优先级（因为在stack中，它位于吸顶和吸底元素之后）就超过了吸顶和吸底。代码如下：
-
- ...因为有下拉刷新，主页面内容置于refresh组件中
-
...头部筛选 -
...吸顶 -
-
总结：随着组件越写越多，发现大部分都需要以一个 stack 元素作为最外层的container，这样写子元素时会有很多便利。但需要注意，一个组件尤其是子组件，最好在 stack 元素外层再多包一个 div元素作为最外层元素，不然会在组件给合的时候，遇到样式错乱的问题。
2 课程卡片
这里我们遇到了一个标题折行的问题，期望的展示方式是，主标题可以在最左则开始折行
但实际上，快应用的文本必须置于 text 元素下，标题左侧的小标签无法设置宽度。因为text 标签下只能使用 span 和 a 两种子元素，这两种子元素无法设置宽高和背景色，那么就只能展示纯文字了。
所以，我们想将标签放置于标题内部，当作h5的 inline-block元素来使用，就难以行得通，实际上快应用也不支持 inline-block 属性。
我们想到的解决办法，还是利用 stack 的思想，将真实标签和标题分离成两层。需要注意的是，标题层需要保留标标签文本，因为最终还是需要这些文本来实现占位（只占位不显示，显示的是外层的真实标签）,代码如下：
-
- 拼团
- 英语
- 【2017-暑】英语直播中考高分班 初一英语直播提高班（人教版）
-
-
- 拼团
- 英语
-
-
但问题是这些标签文本，无法设置宽度，我们就想到通过增大字号，来让标题内部的标签文本宽度大体上和外层真实的标签大致相同，从而解决标题自动换行的问题。
快应用的元素和组件，很多时候不同于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透明节点元素
可以使用实现更为灵活的循环/条件渲染。要注意目前只支持 for 和 if/elif/else 属性。
7.5 text设置行高
如果 text 下有 span 等子元素，那么必须将 line-height 属性设置在span上才能生效。如果 text下没有子元素，则可以直接设置。
7.6 border-bottom-left-radius
该属性在预览开发模式无效，但在真机上调试时正常，因为预览模式和真机上运行的代码是不同的编译结果，所以肯定会有一些细节差异。但是为了快速开发的需要，我们必须保证项目在ide预览模式下大致可用，这样就不用每次都进行直机调试了。
未完待续
上一章：快应用开发商城app的实践分享（一）- 快速开发和调试
下一章：快应用开发商城app的实践分享（三）- 数据和通信
|
|
