微信小程序實戰商城系列二仿淘寶分類入口

分類入口，已經成為了商城項目必須的布局之一，這里以仿照淘寶的分類入口來做案例下圖紅框部分，就是本文重點講解部分;頁面分析：使用for循環遍歷所有項，插入頁面，頁面中的項使...

分類入口，已經成為了商城項目必須的布局之一，這里以仿照淘寶的分類入口來做案例

下圖紅框部分，就是本文重點講解部分;

頁面分析：

使用for循環遍歷所有項，插入頁面，頁面中的項使用左浮動，并使用百分比布局，設置20%的寬度每一項。

這樣滿5個item后，自動排在下一行

wxml：

{{menu.descs[index]}}

wxss：

.menu-wrp{

Width＜/span>:100%;

margin-top:20rpx;

}

.menu-wrp:after{

content:";

display:block;

clear:both;

}

.menu-list{

float:left;

Width＜/span>:20%;

box-sizing:border-box;

padding-bottom:10px;

}

.menu-img{

Width＜/span>:120rpx;

Height＜/span>:84rpx;

display:block;

margin:0auto;

margin-bottom:5px;

}

.menu-desc{

background-color:#ffffff;

color:#333333;

Width＜/span>:100%;

text-align:center;

display:block;

font-size:12px;

}

.gap-1,.gap-2{

Width＜/span>:100%;

Height＜/span>:10rpx;

background:rgb(238,238,238);

}

js：這里的預備的數據，我直接寫在js中，同學們可以改編成通過訪問接口來獲取

Page({

data:{

//預備數據

menu:{

imgUrls:[

'?imgtag=avatar',

'?imgtag=avatar',

'?imgtag=avatar',

'?imgtag=avatar',

'?imgtag=avatar',

'',

'',

'?imgtag=avatar',

'',

'?imgtag=avatar'

],

descs:[

'聚劃算',

'天貓',

'天貓國際',

'外賣',

'天貓超市',

'充值中心',

'阿里旅行',

'領金幣',

'到家',

'分類'