一、实现样式

实现该功能首先要在 index.js中去设置变量以及方法 变量用于接后端传递来的参数，后端的接口只需要要使用mybatisPlus的list查询方法即可。

data: {
//轮播图数组swiperList: []
baseUrl: '",
bigTypeList:[,
bigTypeList_row1:[],
bigTypeList_row2:[]3

定义getBigTypeList之后 在页面加载函数中调用此方法 查询到分类的信息数据返回前端显示

async getBigTypeList({
const result = await requestutil({url: "/bigType/findAll',
method:"GET"
});
console.log(result)}

这里我们选择使用 es7的异步等待接收参数，因为异步等待能防止进程的堵塞。

bigTypeList接收前端返回的数据
然后通过方法给 row1 和row2 赋值 
最后通过set方法给成员变量赋值 在前端显示即可

编辑完index.js文件 接下来就是在前端如何去显示这些商品的信息

<view class="index_bigType"><view class="bigTypeRow"><navigator
wx: for="{{bigTypeList_row1}]”wx:for-item="bigType"
wx:key="id">
<image mode="widthFix" src="{{baseUrl+' /image/bigtype/'tbigType.image}}"x</image>
</navigator>
</view>
</view>

图片储存在后端 所以需要调用后端接口 去返回图片。使用的是navigator标签实现的【图片接口】
接下来 使用样式文件，对商品进行一个排版

.index_bigTypef
padding-top: 20rpx;
background-color:#F7F7F7;.bigTypeRow{
display: flex;navigator{flex: 1;image{
width: 150rpx;}