【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序中如何使用動(dòng)態(tài)API把商城項(xiàng)目的商品進(jìn)行分類

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序中如何使用動(dòng)態(tài)API把商城項(xiàng)目的商品進(jìn)行分類，在下覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。看效果/20180710155533665?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5naGhneg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70商品分類.gif開(kāi)發(fā)計(jì)劃1、商品分類頁(yè)面布局2、調(diào)用動(dòng)態(tài)API獲取數(shù)據(jù)并加載3、點(diǎn)擊商品分類跳轉(zhuǎn)相關(guān)商品集合根據(jù)商品ID獲取商品詳情API數(shù)據(jù)模型訪問(wèn)：https://100/選擇微商城案例，如下圖所示：/20180710155549374?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5naGhneg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70商品分類API.jpg下方還有詳細(xì)的數(shù)據(jù)模型可以查看哦！classify.wxml<!--主盒子-->

<view

class="container">

<!--左側(cè)欄-->

<view

class="nav_left">

<block

wx:for="{{classifyItems}}">

<!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id，那個(gè)就是當(dāng)前狀態(tài)-->

<!--用data-index記錄這個(gè)數(shù)據(jù)在數(shù)組的下標(biāo)位置，使用data-id設(shè)置每個(gè)item的id值，供打開(kāi)2級(jí)頁(yè)面使用-->

<view

class="nav_left_items

{{curNav

==

item.id

?

'active'

:

''}}"

bindtap="switchRightTab"

data-index="{{index}}"

data-id="{{item.id}}">

{{}}

</view>

</block>

</view>

<!--右側(cè)欄-->

<view

class="nav_right">

<!--如果有數(shù)據(jù)，才遍歷項(xiàng)-->

<view

wx:if="{{classifyItems[curIndex].ishaveChild}}">

<block

wx:for="{{classifyItems[curIndex].shopClassifyDtoList}}">

<view

class="nav_right_items">

<!--界面跳轉(zhuǎn)

-->

<navigator

url="/pages/classifyGoods/classifyGoods?classifyId={{item.id}}">

<image

src="{{item.imgUrl}}"></image>

<text>{{}}</text>

</navigator>

</view>

</block>

</view>

<!--如果無(wú)數(shù)據(jù)，則顯示數(shù)據(jù)-->

<view

class="nodata_text"

wx:else>該分類暫無(wú)數(shù)據(jù)</view>

</view>

</view>classify.wxss/*

pages/classify/classify.wxss

*/

page{

background:

#f5f5f5;

}

/*總體主盒子*/

.container

{

position:

relative;

width:

100%;

height:

100%;

background-color:

#fff;

color:

#939393;

}

/*左側(cè)欄主盒子*/

.nav_left{

/*設(shè)置行內(nèi)塊級(jí)元素*/

position:

absolute;

/*

display:

inline-block;

*/

width:

25%;

height:

100%;

/*主盒子設(shè)置背景色為灰色*/

background:

#f5f5f5;

text-align:

center;

left:

0;

top:0;

}

/*左側(cè)欄list的item*/

.nav_left

.nav_left_items{

height:

40px;

line-height:

40px;

padding:

6px

0;

border-bottom:

1px

solid

#dedede;

font-size:

14px;

}

/*左側(cè)欄list的item被選中時(shí)*/

.nav_left

.nav_left_items.active{

/*背景色變成白色*/

background:

#fff;

color:

#f0145a;

}

/*右側(cè)欄主盒子*/

.nav_right{

/*右側(cè)盒子使用了絕對(duì)定位*/

position:

absolute;

top:

0;

right:

0;

flex:

1;

/*寬度75%，高度占滿，并使用百分比布局*/

width:

75%;

height:

1000px;

padding:

10px;

box-sizing:

border-box;

background:

#fff;

}

/*右側(cè)欄list的item*/

.nav_right

.nav_right_items{

/*浮動(dòng)向左*/

float:

left;

/*每個(gè)item設(shè)置寬度是33.33%*/

width:

33.33%;

height:

120px;

text-align:

center;

}

.nav_right

.nav_right_items

image{

/*被圖片設(shè)置寬高*/

width:

60px;

height:

60px;

margin-top:

15px;

}

.nav_right

.nav_right_items

text{

/*給text設(shè)成塊級(jí)元素*/

display:

block;

margin-top:

15px;

font-size:

14px;

color:

black;

/*設(shè)置文字溢出部分為...*/

overflow:

hidden;

white-space:

nowrap;

text-overflow:

ellipsis;

}

.nodata_text

{

color:

black;

font-size:

14px;

text-align:

center;

}

.left_cate

{

display:

flex;

flex-direction:

row;

/*每個(gè)高30px*/

height:

40px;

/*垂直居中*/

line-height:

40px;

/*再設(shè)上下padding增加高度，總高42px*/

padding:

6px

0;

/*只設(shè)下邊線*/

border-bottom:

1px

solid

#dedede;

/*文字14px*/

font-size:

14px;

background:

#fff;

color:

#f0145a;

}

.separate

{

background-color:

#f0145a;

width:

10rpx;

z-index:

10;

}classify.jsconst

ajax

=

require('../../utils/ajax.js');

const

utils

=

require('../../utils/util.js');

Page({

/**

*

頁(yè)面的初始數(shù)據(jù)

*/

data:

{

classifyItems:[],

curNav:

1,

curIndex:

0

},

//事件處理函數(shù)

switchRightTab:

function

(e)

{

//

獲取item項(xiàng)的id，和數(shù)組的下標(biāo)值

let

id

=

e.target.dataset.id,

index

=

parseInt(e.target.dataset.index);

//

把點(diǎn)擊到的某一項(xiàng)，設(shè)為當(dāng)前index

this.setData({

curNav:

id,

curIndex:

index

})

},

/**

*

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載

*/

onLoad:

function

(options)

{

var

that

=

this;

that.classifyShow();

},

classifyShow:

function

(success)

{

var

that

=

this;

ajax.request({

method:

'GET',

url:

'classify/getShopClassifyList?key='

+

utils.key,

success:

data

=>