铁雪资源网 Design By www.gsvan.com
续上一篇的文章:微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)
所提及的购物数量的加减,现在说说商品属性值联动选择。
为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分
现在就为大家介绍这个小组件,在小程序中,该如何去写
下图为本项目的图:
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]" 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: this.data.commodityAttr }); this.distachAttrValue(this.data.commodityAttr); // 只有一个属性组合的时候默认选中 // console.log(this.data.attrValueList); if (this.data.commodityAttr.length == 1) { for (var i = 0; i < this.data.commodityAttr[0].attrValueList.length; i++) { this.data.attrValueList[i].selectedValue = this.data.commodityAttr[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 "text-align: center">demo地址:微信小程序商城项目之商品属性值联动选择
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
微信小程序,商城,商品属性分类
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无微信小程序商城项目之商品属性分类(4)的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?