高仿瑞幸小程序 07 为你推荐模块

2020 年 05 月 12 日 阅读数: 72
高仿瑞幸小程序 07 为你推荐模块

“为你推荐”模块我们将分成三个部分

1 静态数据的界面

2 通过云函数获取数据

3 通过云数据库获取数据

今天,我们讲的是第一部分如何绘制静态数据的“为你推荐”。

也将分为三块内容

1 布局分析

2 编写静态数据

3 绑定数据,循环渲染

一 我们来分析一下布局

我们可以看出,这个模块由上下两个row组成 

我们来分析一下,上面的row由三个col组成。第二个col利用offset属性,与第一个col拉开了距离。如下图: 

略微复杂的是下面的row,等分城了4个col。 

现在我们来分析单个col。我们知道,在col中,元素是从上而下布局的。所以从上到下,依次为image,view。下面的价格由于我们要用到横向布局,所以是一个row,如下图: 

让我们来重点分析一下最下面的row的布局。我用了三个col,第一个col用来放价格,第二个是加号按钮,第三个col实现的是右编剧。他们的比例分别是18:4:2 

我们知道col是垂直布局,所以放置价格的col中我们会放入两个view。我比较喜欢在view中放文字。

至此,我们就完成了布局的分析。

二 静态数据

“为你推荐”模块的数据是从云数据库中读取的,只不过在这一节中,我们将先采用静态数据模拟一下。我们该怎么写静态数据呢?

首先,我们要认识到,为你推荐这个模块推荐的是4个产品。所以这个数据应该是一个数组。而每个产品的参数是一致的,应该有缩略图:thum,产品名:name,原价:oPrice,折扣价:nPrice。

所以我们在“pages/home/cmponents/home/home.js”文件中的静态数据编写如下:

data: {
......
products: [{
name: "拿铁",
oPrice: 24,
nPrice: 12,
thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/88F34543128D-1.jpeg"
},
{
name: "提拉米苏爱摩卡",
oPrice: 19,
nPrice: 28,
thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/7B69340506EC-1.jpeg"
},
{
name: "陨石拿铁",
oPrice: 28,
nPrice: 16.8,
thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/82B1B9FDDB21-1.jpeg"
},
{
name: "榛果拿铁",
oPrice: 28,
nPrice: 16.8,
thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/FBD8B7AADBD9-1.jpeg"
}
]
},
......
}

这里所涉及的图片我会放在github上。大家可以存到自己的云存储上。

三 绑定静态数据

最后,让我们来看看界面上的代码该怎么写,打开“pages/home/cmponents/home/home.wxml”,新增一个view

<view class="mid_menu">
<van-row gutter="6">
<van-col span="8">
<view class="menu_title">为你推荐</view>
</van-col>
<van-col span="6" offset="8">
<view class="change">换一批</view>
</van-col>
<van-col span="2">
<van-icon color="gray" size="28rpx" name="replay" />
</van-col>
</van-row>
<van-row gutter="10">
<block wx:for="{{products}}" wx:key="*this">
<van-col span="6">
<van-image radius="16rpx" width="{{productWidth}}rpx" height="{{productWidth}}rpx" src="{{item.thum}}" />
<view class="pTitle">{{item.name}}</view>
<van-row>
<van-col span="18">
<view class="nPrice">¥{{item.nPrice}}</view>
<view class="oPrice">¥{{item.oPrice}}</view>
</van-col>
<van-col span="4">
<image style="width:30rpx;height:30rpx;margin-top:10rpx;" src="./images/btnAdd.png" />
</van-col>
<van-col span="2">
</van-col>
</van-row>
</van-col>
</block>
</van-row>
</view>

这里面的知识点,其实我们之前都讲过。无非就是以下几点:

1 row和col的使用,它们是如何按比例布局的,今天的新知识点是偏移量属性offset,用来实现间隔布局。

2 推荐的产品,我们用block和wx:for实现了数据的绑定和产品的循环渲染。wx:key和item的意义也是学过的内容。

所以,如果大家是从头一路看过来的,这节将是非常轻松的。如果对样式有什么疑问,可以参看home.wxss里面的内容。

下一节,将会有新的内容,云函数,这是一个非常强大的功能。学会使用后,我们就离10x程序员又近了一步。

完整代码我放在了github上,地址是:

https://github.com/gogoswift/luckin

这个系列的文章列表

我所想的跨平台开发:小程序 +App+Web

高仿瑞幸小程序 00 准备工作

高仿瑞幸小程序 01 初建项目,引入 Vant Weapp

高仿瑞幸小程序 02 创建 Tabbar

高仿瑞幸小程序 03 创建轮播图

高仿瑞幸小程序 04 小程序的全局数据

高仿瑞幸小程序 05 更正轮播组件的高度计算

高仿瑞幸小程序 06 layout 布局

高仿瑞幸小程序 07 为你推荐模块

用户头像

曾伟@喵先森

关注

与码共舞 2018.03.26 加入

我在浪尖浪,哪管它是前浪还是后浪。

评论 (1 条评论)

发布
用户头像
作者你好,你的实战教程写得真棒👍,请问可以把这个系列转到:图雀社区,公众号嘛?会标注文章来源的!
3 小时前
回复
好的
2 小时前
回复
没有更多了
高仿瑞幸小程序 07 为你推荐模块-InfoQ写作平台