当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序商城项目之淘宝分类入口（2）

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

2018年05月21日  | 移动技术网IT编程  | 我要评论

分类入口，已经成为了商城项目必须的布局之一，这里以仿照淘宝的分类入口来做案例
下图红框部分，就是本文重点讲解部分，另外本文并没有写点击某个入口跳转页面。
如需学习页面跳转的同学，可以参考此文
微信小程序的页面跳转和参数传递 —— 微信小程序教程系列（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-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:[ 
    'http://gw.alicdn.com/tps/i2/tb19bluivxxxxx6xpxxn4ls0xxx-183-129.png?imgtag=avatar', 
    'http://gw.alicdn.com/tps/tb1fdohlvxxxxczxfxxxxxxxxxx-183-129.png?imgtag=avatar', 
    'http://gw.alicdn.com/tps/tb1plmnlvxxxxxexfxxxxxxxxxx-183-129.png?imgtag=avatar', 
    'http://gw.alicdn.com/tps/tb1rn0hmfxxxxxnxpxxxxxxxxxx-183-129.png?imgtag=avatar', 
    'http://gw.alicdn.com/tps/tb1exaolvxxxxxexfxxxxxxxxxx-183-129.png?imgtag=avatar', 
    'http://img.alicdn.com/tps/tb1gzmjlxxxxxxoxxxxxxxxxxxx-183-129.png', 
    'http://gw.alicdn.com/tps/i3/tb1ewu2kvxxxxxkapxxn4ls0xxx-183-129.png', 
    'http://gw.alicdn.com/tps/tb1cnibjpxxxxataxxxxxxxxxxx-183-129.png?imgtag=avatar', 
    'http://img.alicdn.com/tps/tb1caoplvxxxxadaxxxxxxxxxxx-183-129.png', 
    'http://gw.alicdn.com/tps/i1/tb1c1fmipxxxxawxpxxn4ls0xxx-183-129.png?imgtag=avatar' 
   ], 
   descs:[ 
     '聚划算', 
     '天猫', 
     '天猫国际', 
     '外卖', 
     '天猫超市', 
     '充值中心', 
     '阿里旅行', 
     '领金币', 
     '到家', 
     '分类' 
   ] 
  } 
 } 
  
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网