在具有多规格选择的电商项目中，往往需要根据当前选中的规格来确定库存数，以及限制用户选择无库存的属性，将该操作放在前端处理，可以很大程度的优化用户体验。

之前有写过OC版本，最近刚更新了小程序版本，Demo。

由于近期项目需求，又把代码翻出来看了一下，整理了一个小程序版本的，做了两次之后，整体思路也比较明确，所以，写点东西记录一下，也希望能帮助到有需要的朋友。

OC版本效果预览 小程序版本效果预览

下面以小程序版本为例简单讲解一下

数据格式分为两部分：

1、商品的规格属性列表

2、商品的sku组合以及其对应的商品id，价格，库存数

一、处理数据，获取结果集

对商品的sku数据进行处理，获取到sku所有可能的组合方式，得到一个结果集，引入sku.js中的createDateSource方法，调用该方法即可得到需要的结果集。

const { createDateSource } = require('../../config/sku.js');

    var skuResult = createDateSource(skuData);

二、渲染页面布局

使用商品的规格属性列表数据渲染UI。

数据中的isSelect代表：-1(不可选)，0（未选中），1（选中）。

三、处理初始的选中状态

    selectedIdArray  存放选中属性id的数组。

根据isSelect获取selectedIdArray中的元素，如果当前项未选中，则在selectedIdArray中插入一个空字符串占位，如果是选中状态，就把该项的id插入到selectedIdArray的对应位置。

例如：demo中的属性为5种，那么如果初始5项均为未选中，那么selectedIdArray的值为

      ['','','','','']

假如第二项是选中状态，那么selectedIdArray的值为

['','选中项的id','','','']

四、处理点击属性的事件

处理跟第三步类似，如果当前项是可点击的，就将该项的id替换到selectedIdArray对应的位置即可，如果是取消选中，则在该位置插入空字符串占位。

五、处理不可选的属性项

遍历属性列表，将属性列表中的每一项的id插入到selectedIdArray对应的位置，移除selectedIdArray中的空字符串，将其中的对象排序后用 ";" 拼接，得到一个临时组合，如果第一步获取到的所有组合方式（skuResult）中没有该组合，表示当前项不可选。

六、获取价格区间、库存数以及商品id

重复第五步获取id组合的方法，获取到当前选中的组合的key，然后从skuResult即可获取当前组合的价格区间，库存数，当所有项均选中时，就可以得到唯一的商品id。

Over。