分類入口近年來，已經(jīng)成為了商城項(xiàng)目必須的布局之一講道理，這里以仿照淘寶的分類入口來(lái)做案例下圖紅框部分，就是本文重點(diǎn)講解部分;頁(yè)面分析：使用for循環(huán)遍歷所有項(xiàng)技術先進，插入頁(yè)面更多的合作機會，頁(yè)面中的項(xiàng)使...

分類入口，已經(jīng)成為了商城項(xiàng)目必須的布局之一認為，這里以仿照淘寶的分類入口來(lái)做案例

下圖紅框部分服務好，就是本文重點(diǎn)講解部分;

頁(yè)面分析：

使用for循環(huán)遍歷所有項(xiàng)，插入頁(yè)面提高鍛煉，頁(yè)面中的項(xiàng)使用左浮動(dòng)發展邏輯，并使用百分比布局凝聚力量，設(shè)置20%的寬度每一項(xiàng)有所提升。

這樣滿5個(gè)item后，自動(dòng)排在下一行

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：這里的預(yù)備的數(shù)據(jù)新的力量，我直接寫在js中先進水平，同學(xué)們可以改編成通過(guò)訪問(wèn)接口來(lái)獲取

Page({

data:{

//預(yù)備數(shù)據(jù)

menu:{

imgUrls:[

'?imgtag=avatar',

'?imgtag=avatar',

'?imgtag=avatar',

'?imgtag=avatar',

'?imgtag=avatar',

'',

'',

'?imgtag=avatar',

'',

'?imgtag=avatar'

],

descs:[

'聚劃算',

'天貓',

'天貓國(guó)際',

'外賣',

'天貓超市',

'充值中心',

'阿里旅行',

'領(lǐng)金幣',

'到家',

'分類'