这篇文章主要为大家展示了“微信小程序商城项目的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序商城项目的示例分析”这篇文章吧。页面分析:使用fo
这篇文章主要为大家展示了“微信小程序商城项目的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序商城项目的示例分析”这篇文章吧。
页面分析:
使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项。
这样满5个item后,自动排在下一行
wxml:
<view class="menu-wrp">
<!--设定一个item项后,遍历输出-->
<view class="menu-list" wx:for="{{menu.imgUrls}}">
<image class="menu-img" src="{{item}}" />
<view class="menu-desc">{{menu.descs[index]}}</view>
</view>
</view>
<view class="gap-1"></view>
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:[
'/file/imgs/upload/202210/19/4lb2qy5eq4b.png?imgtag=avatar',
'/file/imgs/upload/202210/19/gxwvdmy24xj.png?imgtag=avatar',
'/file/imgs/upload/202210/19/tpuu45bezpd.png?imgtag=avatar',
'/file/imgs/upload/202210/19/prrgdhvza2r.png?imgtag=avatar',
'/file/imgs/upload/202210/19/afef4qqoko4.png?imgtag=avatar',
'/file/imgs/upload/202210/19/xqpw2hum1u3.png',
'/file/imgs/upload/202210/19/lrhdwdxyqhm.png',
'/file/imgs/upload/202210/19/vi0pubio3c5.png?imgtag=avatar',
'/file/imgs/upload/202210/19/1t5qx3rslal.png',
'/file/imgs/upload/202210/19/emecozbljfv.png?imgtag=avatar'
],
descs:[
'聚划算',
'天猫',
'天猫国际',
'外卖',
'天猫超市',
'充值中心',
'阿里旅行',
'领金币',
'到家',
'分类'
]
}
}
})
以上是“微信小程序商城项目的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网node.js频道!
--结束END--
本文标题: 微信小程序商城项目的示例分析
本文链接: https://www.lsjlt.com/news/70352.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0