主页 / 网络编程 /

微信小程序商城项目之淘宝分类入口（2）

网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实战商城系列之淘宝分类入口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

页面分析

使用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-: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:[ 
    'http://gw.alicdn./tps/i2/TB19BluIVXXXXX6XpXXN4ls0XXX-183-129.png?imgtag=avatar', 
    'http://gw.alicdn./tps/TB1FDOHLVXXXXcZXFXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://gw.alicdn./tps/TB1PlmNLVXXXXXEXFXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://gw.alicdn./tps/TB1RN0HMFXXXXXNXpXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://gw.alicdn./tps/TB1exaOLVXXXXXeXFXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://img.alicdn./tps/TB1GzMJLXXXXXXoXXXXXXXXXXXX-183-129.png', 
    'http://gw.alicdn./tps/i3/TB1Ewu2KVXXXXXkapXXN4ls0XXX-183-129.png', 
    'http://gw.alicdn./tps/TB1iBJpXXXXataXXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://img.alicdn./tps/TB1caopLVXXXXaDaXXXXXXXXXXX-183-129.png', 
    'http://gw.alicdn./tps/i1/TB1c1FMIpXXXXawXpXXN4ls0XXX-183-129.png?imgtag=avatar' 
   ], 
   descs:[ 
     '聚划算', 
     '天猫', 
     '天猫国际', 
     '外卖', 
     '天猫超市', 
     '充值中心', 
     '阿里旅行', 
     '领金币', 
     '到家', 
     '分类' 
   ] 
  } 
 } 
  
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：微信小程序教程系列之页面跳转和参数传递（6） 下一篇：微信小程序商城项目之购物数量加减（3）

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by