个人微信小程序制作_微信小程序商城项目之淘宝

摘要: 手机微信微信小程序商城系统新项目之淘宝网归类通道(2) 本文关键为大伙儿详尽详细介绍了手机微信微信小程序实战演练商城系统系列产品之淘宝网归类通道,具备一定的参照...

微信小程序商城项目之淘宝分类入口(2)       这篇文章主要为大家详细介绍了微信小程序实战商城系列之淘宝分类入口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例
下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面。
如需学习页面跳转的同学,可以参考此文
微信小程序的页面跳转和参数传递 —— 微信小程序教程系列(6)

页面分析:

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

wxml:

 view 
 !--设定一个item项后,遍历输出-- 
 view wx:for="{{menu.imgUrls}}" 
 image src="{{item}}" / 
 view {{menu.descs[index]}} /view 
 /view 
 /view 
 view /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:[ 
 't凡科抠图/i2/TB19BluIVXXXXX6XpXXN4ls0XXX-183-129.png imgtag=avatar', 
 't凡科抠图/TB1FDOHLVXXXXcZXFXXXXXXXXXX-183-129.png imgtag=avatar', 
 't凡科抠图/TB1PlmNLVXXXXXEXFXXXXXXXXXX-183-129.png imgtag=avatar', 
 't凡科抠图/TB1RN0HMFXXXXXNXpXXXXXXXXXX-183-129.png imgtag=avatar', 
 't凡科抠图/TB1exaOLVXXXXXeXFXXXXXXXXXX-183-129.png imgtag=avatar', 
 't凡科抠图/TB1GzMJLXXXXXXoXXXXXXXXXXXX-183-129.png', 
 't凡科抠图/i3/TB1Ewu2KVXXXXXkapXXN4ls0XXX-183-129.png', 
 't凡科抠图/iBJpXXXXataXXXXXXXXXXX-183-129.png imgtag=avatar', 
 't凡科抠图/TB1caopLVXXXXaDaXXXXXXXXXXX-183-129.png', 
 't凡科抠图/i1/TB1c1FMIpXXXXawXpXXN4ls0XXX-183-129.png imgtag=avatar' 
 descs:[ 
 '聚划算', 
 '天猫', 
 '天猫国际', 
 '外卖', 
 '天猫超市', 
 '充值中心', 
 '阿里旅行', 
 '领金币', 
 '到家', 
 '分类' 
}) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网页设计模板