APICloud AVM多端开发 | 生鲜电商App开发商品列表，购物车，城市列表开发（二）原创

这节我们来看一下首页的具体实现。首先我们来看一下首页的效果。首页有。导航栏。以及我们的分类列表。还有。三妹那边。这几部分组成。然后我们看一下代码。我们的STL文件有三部分组成。啊，首先是他的部分。还有script的部分。Style部分。这个他的下面呢，就是我们的啊UI布局。一个结构。

然后script下面呢，我们啊。可以通过import就是导入啊JJS里面的一个变量，或者是啊，我们组件里面的一个组件。然后这里是导出的一个对象，可以看一下这个啊，对象里面有三部分。啊，一个name，一个date。这里面就是我们那个数据绑定的数据。然后下面是我们啊，所有的一些方法都是在这下面定义。然后下面就是我们的啊，这个页面的样式啊，当然也可以啊，Style里面还可以引，就是引入外部的也可以。那我们首先来看一下temp的标签上面。我们这是分成的。几大部分。

啊，首先是我们这个。啊，导航栏。就是这部分。啊，首先看我们的导航栏啊，上面有啊。有一个左边有个选择的一个按钮，然后有个标题间。啊，右边有一个啊，个人中心跳转个人中心的一个按钮。然后我们看一下代码，这里面有个组件。那shift那个SHIFT2组件有什么作用呢？我们可以把这个啊注释一条，然后再预览一下。我们预览的话，可以直接在这个页面里面啊，点WiFi真接实时预览。然后就可以查看。这个时候看到我们之前好好的这个导航栏啊，已经被啊顶到最上面去了。所以说这个C2的啊，一个作用就是啊，它能自动的，呃，把这个导航展部分，比如说这个刘海是飞这部分。

让重要让那个内容啊，能显示在安全的区域内，我们然后再。看一下。啊。大家可以看到这就那个这个组件人员啊一个作用。我们点。嗯。然后我们看一下啊，这个城市选择这个按钮。可以看到点了以后啊，它是有一个啊上下翻转的一个动画。这个动画效果我们是通过控制。这个image这个标签的一个class，动态切换这个class样式来实现，来实现呢。

大家可以看一下。实际上就是一个存的一个啊转换。然后这个啊，加了一个啊transition的一个过度动画，然后这个transition的啊，这个属性就是我们的这个transform，也就是说每次改变这个的时候啊，啊，它就会有一个200毫秒的一个动画。我们显示啊，显示图片我们就用这个image标签，然后文字的话我们就用text。啊，实际上就啊对应到H5里面啊，就是也就是img标签，然后啊，这个可以对应span标签。然后这VIVO呢，啊，一般就是对应成咱们的那个div。

然后我们看一下这个按钮的一个点击事件。这个我们点击事件是用阿克阿克尼来定一个点击事件，可以看到这个点击事件的事件。会出发。打开个人中心的一个方法。我们首先是在这里面判断的话，是否登录，如果登录以后，我们会跳转个人中心，如果没有登录，我们就会啊跳转到登录页面。打开页面，我们都是用api.open win方法。一个name，一个URL路径。啊，这就是我们的这个。

导航栏的部分是实线。分队列表，我们用vill来实现一个水平滚动的，用X来指定。然后显示我们的这个是一个text text的话。啊，我们是。把它当成一个模板。然后用v for的方式来循环渲染这个模板。V for的，呃，写法呢，就是。啊，这里展开对这个啊，Where type，历史这是一个定义的啊。这里面定义的一个。数组，然后我们对这个数据进行展开，然后循环渲染，渲染这个text，那个模板组件。然后这个，呃。点了以后啊，我们有个切换的一个效果。这个文字的颜色，我们是通过这个动态class的切换啊来实现的。

这里我们给他绑定的一个index的一个自定义属性。然后自定义属性，我们看一下是如何获取的，我们再点击，点击以后我们需要是需要知道点击的啊哪一项。我们看一下这个制定属性是如何获取的，首先我们这个点击事件里面有一个啊，E的一个参数。通过这个参数的啊，1.currenttarget，然后data里面我们就可以拿到这个当刚才定义的这个index。然后我们就可以知道是。点击的是哪一项。啊，然后我们做对应的处理操作。然后我们看一下。商品列表。

快看到商品列表有下拉刷新。还有我们啊，有三大加载。有这些操作，我们看一下如何实现的。商品列表我们是一个竖向滚动的，一个square实现竖向滚动，我们用square来制定。然后下达刷新呢，我们是通过啊enable的这个参数来。说明开启我们的自定义那个默认的下拉刷新。然后通过refresh啊，这个参啊，这个属性来指定啊，当前是刷新中还是说已经刷新完成是正常状态啊，通过这个参数来控制。然后这个是啊，刷新就是刷新中的一个回调。这个是啊，滚动到底部，我们用来加载更多的一个回调。

这个enable to，这个有什么作用呢？这个是一个滚动到顶部的一个啊作用。比如说我们现在啊，滚动到底部的，这这个时候，如果我们这个时候可以点击这个状态栏呢。它就会自动的滚动到顶部啊，这样就啊方便用户。这个仓啊，就是这样一个作用。那这个商品列表的，我们首先是一个啊，一个image展示一个。Banner。然后我们是有一个。这里。通过view我们。定义一个模板，一个赛的一个模板。

然后这个模板通过v for。啊，也是通过微。来循环渲染。这个对例子就是我们的啊。商品列表的数据。啊，有多少项，然后就循环渲染多少个。我们看一下点这个加号。这是加入购物车的一个操作。我们得首先登录一下。啊，网络有点慢啊。然后我们点一下看一下。可以看到点加号以后啊，我们出来了一个减号，然后还有一个。当前购物车的一个啊数字。然后我们再看一下。减呀。没有的时候啊，它又会显示就就会隐藏掉，我们看一下这个是啊如何实现的。

首先我们找啊，我们找到这个。加号减号呢，我们这个方法。可以看到这是我们的添加啊，这个是我们的删除这里面的逻辑。可以看到这个逻辑里面，我们对这个item里面一个welcome。啊，有一个操作。我们。然后我们可以看到啊，我们在这里这个。通过这个welcome count。我们来动态的选择一个啊这个class。

就是为难的时候。隐藏。可以看到这个烂其实就是一个display。那这个display和那个veryability这两个有什么区别呢？Display的话它就会。把这个。啊，从当前的这个布局里面给移除掉啊，而而不是普通的那个显示隐藏。啊，这个就是我们的商品列表的一个啊实现。接下来我们看一下这个，可以看到这里一个悬浮的一个图标啊，那这个图标我们是啊，怎么实现的。这个图标我们是通过绝对定位来实现。啊，我们APP里面的定位和那个布局啊，我们只支持绝对定位和相对定位。

可以看到这个米。它实际上就是一个absolute的一个绝对定位。然后相对底部啊，有个一百一的一个。偏银。那是你的。就是显示的一个组件，可看到这个，你看的这个组件是我们从啊这个。Components下面frame等STEM里面给导入进来了。点到这个以后，我们会跳转到一个我们的购物车页面。那具体的这个M卡的这个啊，组件的实现呢，我们是在。

在里面。可以看到。非常简单，就是一个文字啊。的一个展示，然后里面啊会。获取一些呃，当前的购物车的一些信息，一个大体的一个信息，然后进行展示。这里面还有一个就是我们刚才啊，点这个城市选择出现的这个啊列表列。可以看到它是。啊，通过这个为来控制显示隐藏呢。这个服啊。啊，这是我们定义的一个变量，对里面定义的变量通过VE来啊控制这整个。显示隐藏。V衣，V衣服和微秀的一个区别就是啊，微秀也是只是简单的显示隐藏啊，并不会从内存里面彻底给它清除。

那如果是现在我们这个的话。当这个。关闭或者是选择这个啊城市的时候，我们会。这个会变成force对吧，变成false以后这个整个啊，它就会从这个。内存里面给移除掉。而不简单的是啊，简单的显示隐藏。那这个city select同理也是一个自定义组件。这个组件我们啊。啊，是放在这儿。首先啊，这个组件也是，我们也是有一个。然后。通过scarl来。循环展示一个啊层次列表。

点击以后啊，点击以后我们会把这个啊，当前点击选择的这个城市给回传。啊，给传回到我们的那个首页，通过我们是通过一个。陈数选择一个事件给发回去。这个事件我们是。通过在这里面进行一个监听呢。大家可以看到我们是这里面监听的一些事件，包括通过ADD listener监听的一些啊。更新购物车的时间。啊，将近刚才我们的城市选择的一个时间。然后将近开半的一个时间。然后我们看到这个message下面的API ready方法，这是我们的一个页面的一个入口方法，就是页面打开以后，首先会执行这里面的一个方法。

然后在这里面就可以啊，调用我们的API的一些方法。比如刚才API other listener来监听一些事件。这就是我们所谓的一个啊，具体的一个实现。大家可以啊，具体的可以参考这个源码。