HarmonyOSAPP开发- first FA page学习体验

一、技术相关

使用语言: Js

UI模板： first FA page

工具：deveco studio

二、效果呈现

大致效果如下，有一些交互效果在视频中

三、主要步骤如下

第一步

构建页面布局，将页面分解为不同的部分，用容器组件来承载

一些代码如下

第二步

构建页面样式，部分代码如下图

第三步

构建页面逻辑，主要实现的是两个逻辑功能：

当点击时或者焦点移动到不同的缩略图，swiper滑动到相应的图片；
当焦点移动到购物车区时，“Add To Cart”背景颜色从浅蓝变成深蓝，点击后文字变化为“Cart + 1”，背景颜色由深蓝色变成黄色。添加购物车不可重复操作。
部分代码如下图

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/firstFApage