【移动应用开发技术】小程序商城项目中商品属性分类的实现方法

【移动应用开发技术】小程序商城项目中商品属性分类的实现方法

这篇文章主要介绍小程序商城项目中商品属性分类的实现方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！微信小程序之购物数量加减所提及的购物数量的加减，现在说说商品属性值联动选择。为了让同学们有个直观的了解，到电商网截了一个图片，就是红圈所示的部分现在就为大家介绍这个小组件，在小程序中，该如何去写下图为本项目的图：wxml：<view

class="title">商品属性值联动选择</view>

<!--options-->

<view

class="commodity_attr_list">

<!--每组属性-->

<view

class="attr_box"

wx:for="{{attrValueList}}"

wx:for-item="attrValueObj"

wx:for-index="attrIndex">

<!--属性名-->

<view

class="attr_name">{{attrValueObj.attrKey}}</view>

<!--属性值-->

<view

class="attr_value_box">

<!--每个属性值-->

<view

class="attr_value

{{attrIndex==firstIndex

||

attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'attr_value_active':''):'attr_value_disabled'}}"

bindtap="selectAttrValue"

data-status="{{attrValueObj.attrValueStatus[valueIndex]}}"

data-value="{{value}}"

data-key="{{attrValueObj.attrKey}}"

data-index="{{attrIndex}}"

data-selectedvalue="{{attrValueObj.selectedValue}}"

wx:for="{{attrValueObj.attrValues}}"

wx:for-item="value"

wx:for-index="valueIndex">{{value}}</view>

</view>

</view>

</view>

<!--button-->

<view

class="weui-btn-area">

<button

class="weui-btn"

type="primary"

bindtap="submit">确定</button>

</view>wxss：.title

{

padding:

10rpx

20rpx;

margin:

10rpx

0;

border-left:

4rpx

solid

#ccc;

}

/*全部属性的主盒子*/

.commodity_attr_list

{

background:

#fff;

padding:

0

20rpx;

font-size:

26rpx;

overflow:

hidden;

width:

100%;

}

/*每组属性的主盒子*/

.attr_box

{

width:

100%;

overflow:

hidden;

border-bottom:

1rpx

solid

#ececec;

}

/*属性名*/

.attr_name

{

width:

20%;

float:

left;

padding:

15rpx

0;

}

/*属性值*/

.attr_value_box

{

width:

80%;

float:

left;

padding:

15rpx

0;

overflow:

hidden;

}

/*每个属性值*/

.attr_value

{

float:

left;

padding:

0

10rpx;

margin:

0

10rpx;

border:

1rpx

solid

#ececec;

}

/*每个属性选中的当前样式*/

.attr_value_active

{

background:

#FFCC00;

border-radius:

10rpx;

color:

#fff;

padding:

0

10rpx;

}

/*禁用属性*/

.attr_value_disabled

{

color:

#ccc;

}

/*button*/

.btn-area

{

margin:

1.17647059em

15px

0.3em;

}

.btn

{

margin-top:

15px;

background-color:#FFCC00;

color:

#fff;

}

.btn:first-child

{

margin-top:

0;

}js：数据部分，一般情况都是访问接口获取数据的，这里并没有使用网络访问，为了简化demo，直接把一组数据放在data对象中。Page({

data:

{

firstIndex:

-1,

//准备数据

//数据结构：以一组一组来进行设定

commodityAttr:

[

{

priceId:

1,

price:

35.0,

"stock":

8,

"attrValueList":

[

{

"attrKey":

"型号",

"attrValue":

"2"

},

{

"attrKey":

"颜色",

"attrValue":

"白色"

},

{

"attrKey":

"大小",

"attrValue":

"小"

},

{

"attrKey":

"尺寸",

"attrValue":

"S"

}

]

},

{

priceId:

2,

price:

35.1,

"stock":

9,

"attrValueList":

[

{

"attrKey":

"型号",

"attrValue":

"1"

},

{

"attrKey":

"颜色",

"attrValue":

"黑色"

},

{

"attrKey":

"大小",

"attrValue":

"小"

},

{

"attrKey":

"尺寸",

"attrValue":

"M"

}

]

},

{

priceId:

3,

price:

35.2,

"stock":

10,

"attrValueList":

[

{

"attrKey":

"型号",

"attrValue":

"1"

},

{

"attrKey":

"颜色",

"attrValue":

"绿色"

},

{

"attrKey":

"大小",

"attrValue":

"大"

},

{

"attrKey":

"尺寸",

"attrValue":

"L"

}

]

},

{

priceId:

4,

price:

35.2,

"stock":

10,

"attrValueList":

[

{

"attrKey":

"型号",

"attrValue":

"1"

},

{

"attrKey":

"颜色",

"attrValue":

"绿色"

},

{

"attrKey":

"大小",

"attrValue":

"大"

},

{

"attrKey":

"尺寸",

"attrValue":

"L"

}

]

}

],

attrValueList:

[]

},

onShow:

function

()

{

this.setData({

includeGroup:

modityAttr

});

this.distachAttrValue(modityAttr);

//

只有一个属性组合的时候默认选中

//

console.log(this.data.attrValueList);

if

(modityAttr.length

==

1)

{

for

(var

i

=

0;

i

<

modityAttr[0].attrValueList.length;

i++)

{

this.data.attrValueList[i].selectedValue

=

modityAttr[0].attrValueList[i].attrValue;

}

this.setData({

attrValueList:

this.data.attrValueList

});

}

},

/*

获取数据

*/

distachAttrValue:

function

(commodityAttr)

{

/**

将后台返回的数据组合成类似

{

attrKey:'型号',

attrValueList:['1','2','3']

}

*/

//

把数据对象的数据（视图使用），写到局部内

var

attrValueList

=

this.data.attrValueList;

//

遍历获取的数据

for

(var

i

=

0;

i

<

commodityAttr.length;

i++)

{

for

(var

j

=

0;

j

<

commodityAttr[i].attrValueList.length;

j++)

{

var

attrIndex

=

this.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey,

attrValueList);

//

console.log('属性索引',

attrIndex);

//

如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置

if

(attrIndex

>=

0)

{

//

如果属性值数组中没有该值，push新值；否则不处理

if

(!this.isValueExist(commodityAttr[i].attrValueList[j].attrValue,

attrValueList[attrIndex].attrValues))

{

attrValueList[attrIndex].attrValues.push(commodityAttr[i].attrValueList[j].attrValue);

}

}

else

{

attrValueList.push({

attrKey:

commodityAttr[i].attrValueList[j].attrKey,

attrValues:

[commodityAttr[i].attrValueList[j].attrValue]

});

}

}

}

//

console.log('result',

attrValueList)

for

(var

i

=

0;

i

<

attrValueList.length;

i++)

{

for

(var

j

=

0;

j

<

attrValueList[i].attrValues.length;

j++)

{

if

(attrValueList[i].attrValueStatus)

{

attrValueList[i].attrValueStatus[j]

=

true;

}

else

{

attrValueList[i].attrValueStatus

=

[];

attrValueList[i].attrValueStatus[j]

=

true;

}

}

}

this.setData({

attrValueList:

attrValueList

});

},

getAttrIndex:

function

(attrName,

attrValueList)

{

//

判断数组中的attrKey是否有该属性值

for

(var

i

=

0;

i

<

attrValueList.length;

i++)

{

if

(attrName

==

attrValueList[i].attrKey)

{

break;

}

}

return

i

<

attrValueList.length

?

i

:

-1;

},

isValueExist:

function

(value,

valueArr)

{

//

判断是否已有属性值

for

(var

i

=

0;

i

<

valueArr.length;

i++)

{

if

(valueArr[i]

==

value)

{

break;

}

}

return

i

<

valueArr.length;

},

/*

选择属性值事件

*/

selectAttrValue:

function

(e)

{

/*

点选属性值，联动判断其他属性值是否可选

{

attrKey:'型号',

attrValueList:['1','2','3'],

selectedValue:'1',

attrValueStatus:[true,true,true]

}

console.log(e.currentTarget.dataset);

*/

var

attrValueList

=

this.data.attrValueList;

var

index

=

e.currentTarget.dataset.index;//属性索引

var

key

=

e.currentTarget.dataset.key;

var

value

=

e.currentTarget.dataset.value;

if

(e.currentTarget.dataset.status

||

index

==

this.data.firstIndex)

{

if

(e.currentTarget.dataset.selectedvalue

==

e.currentTarget.dataset.value)

{

//

取消选中

this.disSelectValue(attrValueList,

index,

key,

value);

}

else

{

//

选中

this.selectValue(attrValueList,

index,

key,

value);

}

}

},

/*

选中

*/

selectValue:

function

(attrValueList,

index,

key,

value,

unselectStatus)

{

//

console.log('firstIndex',

this.data.firstIndex);

var

includeGroup

=

[];

if

(index

==

this.data.firstIndex

&&

!unselectStatus)

{

//

如果是第一个选中的属性值，则该属性所有值可选

var

commodityAttr

=

modityAttr;

//

其他选中的属性值全都置空

//

console.log('其他选中的属性值全都置空',

index,

this.data.firstIndex,

!unselectStatus);

for

(var

i

=

0;

i

<

attrValueList.length;

i++)

{

for

(var

j

=

0;

j

<

attrValueList[i].attrValues.length;

j++)

{

attrValueList[i].selectedValue

=

'';

}

}

}

else

{

var

commodityAttr

=

this.data.includeGroup;

}

//

console.log('选中',

commodityAttr,

index,

key,

value);

for

(var

i

=

0;

i

<

commodityAttr.length;

i++)

{

for

(var

j

=

0;

j

<

commodityAttr[i].attrValueList.length;

j++)

{

if

(commodityAttr[i].attrValueList[j].attrKey

==

key

&&

commodityAttr[i].attrValueList[j].attrValue

==

value)

{

includeGroup.push(commodityAttr[i]);

}

}

}

attrValueList[index].selectedValue

=

value;

//

判断属性是否可选

for

(var

i

=

0;

i

<

attrValueList.length;

i++)

{

for

(var

j

=

0;

j

<

attrValueList[i].attrValues.length;

j++)

{

attrValueList[i].attrValueStatus[j]

=

false;

}

}

for

(var

k

=

0;

k

<

attrValueList.length;

k++)

{

for

(var

i

=

0;

i

<

includeGroup.length;

i++)

{

for

(var

j

=

0;

j

<

includeGroup[i].attrValueList.length;

j++)

{

if

(attrValueList[k].attrKey

==

includeGroup[i].attrValueList[j].attrKey)

{

for

(var

m

=

0;

m

<

attrValueList[k].attrValues.length;

m++)

{

if

(attrValueList[k].attrValues[m]

==

includeGroup[i].attrValueList[j].attrValue)

{

attrValueList[k].attrValueStatus[m]

=

true;

}

}

}

}

}

}

//

console.log('结果',

attrValueList);

this.setData({

attrValueList:

attrValueList,

includeGroup:

includeGroup

});

var

count

=

0;

for

(var

i

=

0;

i

<

attrValueList.length;

i++)

{

for

(var

j

=

0;

j

<

attrValueList[i].attrValues.length;

j++)

{

if

(attrValueList[i].selectedValue)

{

count++;

break;

}

}

}

if

(count

<

2)

{//

第一次选中，同属性的值都可选

this.setData({

firstIndex:

index

});

}

else

{

this.setData({

firstIndex:

-1

});

}

},

/*

取消选中

*/

disSelectValue:

function

(attrValueList,

index,

key,

value)

{

var

commodityAttr

=

modityAttr;

attrValueList[index].selectedValue

=

'';