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

曾伟@喵先森

关注

发布于: 2020 年 05 月 12 日

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

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>