写点什么

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

发布于: 2020 年 05 月 12 日
高仿瑞幸小程序 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 为你推荐模块


发布于: 2020 年 05 月 12 日阅读数: 231
用户头像

与码共舞 2018.03.26 加入

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

评论 (7 条评论)

发布
用户头像
作者你好,你的实战教程写得真棒👍,请问可以把这个系列转到:图雀社区,公众号嘛?会标注文章来源的!
2020 年 05 月 14 日 08:41
回复
好的
2020 年 05 月 14 日 09:19
回复
谢谢!✌️
2020 年 05 月 14 日 16:56
回复
来互粉个🤓
2020 年 05 月 14 日 17:29
回复
查看更多回复
没有更多了
高仿瑞幸小程序 07 为你推荐模块