本篇内容介绍了“微信小程序商城实现项目分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业万安免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
页面分析：
使用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:[
'/upload/otherpic55/131237.png?imgtag=avatar',
'/upload/otherpic55/131238.png?imgtag=avatar',
'/upload/otherpic55/131239.png?imgtag=avatar',
'/upload/otherpic55/131240.png?imgtag=avatar',
'/upload/otherpic55/131241.png?imgtag=avatar',
'/upload/otherpic55/131242.png',
'/upload/otherpic55/131243.png',
'/upload/otherpic55/131244.png?imgtag=avatar',
'/upload/otherpic55/131245.png',
'/upload/otherpic55/131246.png?imgtag=avatar'
],
descs:[
'聚划算',
'天猫',
'天猫国际',
'外卖',
'天猫超市',
'充值中心',
'阿里旅行',
'领金币',
'到家',
'分类'
]
}
}
})“微信小程序商城实现项目分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
名称栏目：微信小程序商城实现项目分析
分享路径：
http://cdxtjz.cn/article/gjhhco.html
