微信小程序商城实现项目分析

本篇内容介绍了"微信小程序商城实现项目分析"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

页面分析：

使用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:[      '聚划算',      '天猫',      '天猫国际',      '外卖',      '天猫超市',      '充值中心',      '阿里旅行',      '领金币',      '到家',      '分类'    ]   }  }   })

"微信小程序商城实现项目分析"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！