这篇文章主要为大家详细介绍了微信小程序商城项目之商品属性值联动选择,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
续上一篇的文章：微信小程序之购物数量加减
所提及的购物数量的加减，现在说说商品属性值联动选择。
为了让同学们有个直观的了解，到电商网截了一个图片，就是红圈所示的部分
现在就为大家介绍这个小组件，在小程序中，该如何去写
下图为本项目的图：
wxml：
<view>商品属性值联动选择</view>
<!--options-->
<view>
<!--每组属性-->
<view>
<!--属性名-->
<view>{{attrValueObj.attrKey}}</view>
<!--属性值-->
<view>
<!--每个属性值-->
<view>{{value}}</view>
</view>
</view>
</view>
<!--button-->
<view>
<button>确定</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: this.data.commodityAttr
});
this.distachAttrValue(this.data.commodityAttr);
// 只有一个属性组合的时候默认选中
// console.log(this.data.attrValueList);
if (this.data.commodityAttr.length == 1) {
for (var i = 0; i = 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 <p></p><p>运行效果：</p><p style="text-align: center"><img id="theimg" alt="" src="https://img.php.cn/upload/article/000/000/009/823c1c64f74053c1c6f8182bf312642c-2.gif"></p><p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p><p>相关推荐：</p><p><a title="微信小程序商城中侧栏分类的效果实现" href="http://www.php.cn/xiaochengxu-405025.html" target="_blank">微信小程序商城中侧栏分类的效果实现</a><br></p><p><a title="微信小程序商城项目之购物数量加减" href="http://www.php.cn/xiaochengxu-404817.html" target="_blank">微信小程序商城项目之购物数量加减</a><br></p><p><a title="微信小程序购物商城系统开发所需工具" href="http://www.php.cn/xiaochengxu-404735.html" target="_blank">微信小程序购物商城系统开发所需工具</a><br></p><p></p><p class="clearfix"><span class="jbTestPos"></span></p>
登录后复制
以上就是微信小程序商城项目中商品属性分类的实现的详细内容，更多请关注GTHOST其它相关文章！
