页面分析：

使用for循环遍历所有项，插入页面，页面中的项使用左浮动，并使用百分比布局，设置20%的宽度每一项。
这样满5个item后，自动排在下一行

wxml：

 
  
  
   
  {{menu.descs[index]}} 
  
 

wxss：

.menu-wrp { 
 width:100%; 
 margin-top:20rpx; 
} 
.menu-wrp:after{ 
  content:""; 
  display:block; 
  clear:both; 
} 
 
.menu-list{ 
  float:left; 
  width:20%; 
  box-sizing: border-box; 
  padding-bottom:10px; 
} 
 
.menu-img{ 
  width:120rpx; 
  height:84rpx; 
  display:block; 
  margin:0 auto; 
  margin-bottom:5px; 
} 
.menu-desc{ 
  background-color:#ffffff; 
  color:#333333; 
  width:100%; 
  text-align: center; 
  display:block; 
  font-size:12px; 
} 
.gap-1,.gap-2{ 
  width:100%; 
  height:10rpx; 
  background:rgb(238, 238, 238); 
}

js：

这里的准备的数据，我直接写在js中，同学们可以改编成通过访问接口来获取

Page({ 
 data: { 
//准备数据 
  menu:{ 
   imgUrls:[ 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131237.png?imgtag=avatar', 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131238.png?imgtag=avatar', 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131239.png?imgtag=avatar', 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131240.png?imgtag=avatar', 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131241.png?imgtag=avatar', 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131242.png', 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131243.png', 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131244.png?imgtag=avatar', 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131245.png', 
    'https://cache.yisu.com/upload/ask_collection/20210725/111/131246.png?imgtag=avatar' 
   ], 
   descs:[ 
     '聚划算', 
     '天猫', 
     '天猫国际', 
     '外卖', 
     '天猫超市', 
     '充值中心', 
     '阿里旅行', 
     '领金币', 
     '到家', 
     '分类' 
   ] 
  } 
 } 
  
})