一、概述

接上篇文章在主页实现了，商品在售信息，那么我们接下来要实现的就是，点击相应的类别商品会跳出该类商品的排序信息。

首先在index.js

hotProductList:[]

定义热卖的商品信息列表。

接下来我们需要定义方法，调用后端接口然后接收后端返回来的数据即可。

async getHotProductList{
const result = await requestUtil(iurl: " /product/findHot',
method:“GET"
});
this. setData({
hotProductList: result.message})

返回的数据 使用this.set方法赋值给自定义变量即可

定义好方法和变量后我们可以就需要在前端显示。

通过类选择器 之前引用了样式的js 所以这里可以直接使用模板

<!--商品热卖推荐开始-->
<view class="index_hotProduct">
<view class="product_title"></view><view class="product_list">
<view class="product_detail"wx:for="{{ hotProductList]}”wx:for-item="hotProduct"wx:key="id"
<navigator>
<image mode="widthFix" src="{ { baseUrl+'/image/product/"thotProduct.proPicH}"></image>
<view class="product_name">{ {hotProduct.name}/view><view class="product_price">f{hotProduct.price}}</view><button size="mini" type="warn">立即购买k/buttonk
</navigator>
</view>

使用 {{}}将j's中的数据读取出来到页面显示

如上系列操作完后，商品就可以正常的显示在前端，但是我们还需要对样式进行一个详细的设计。

-product_list{display: flex;flex-wrap: wrap;- product_detail
T
width: 46%;
text-align: center;navigator{
image{
width: 106%;}
- product _name{
aiano
}
-product price{
wwiwwiiniv

根据层级结构 对页面样式进行设计。