1.效果图

2.文件及部分思路

• index.wxml文件

<view class="multipleStandard" bindtap="standardSelect">
  "standard">
    规格:
    <text "item">颜色</text>    
    </text>    
  </view>
  <image src="/images/arrows.png" "arrows"></image>
</view>
style="background:rgb(207,224,232); height: 300rpx;margin-top: 50rpx;">animation="{{animationData}}" "selectStandard" catchtouchmove="noMove">
  "tophead">
    "topimg">
      {{goods.original_img}}"></image>
    </view>
    "topright">
      "selectClose">
        "color:#ef5426;">{{standardObject.price}}</view>
        "/images/close.png" "handleClose"></image>
      </view>
      "margin:10rpx 0;color:#999999;">库存:{{standardObject.store_count}}<view>规格: {{mergeStandard}}"standard" wx:for={{commodityStandard}}wx:key={{standardIndex}}wx:for-index="standardIndex">
    "standardTitle">{{item[0].spec_name}}"standardItem">
      <block {{item}}{{item.item_id}}">
        "selectItem {{isSelect[item.isClick]}}"handleStandardClick" data-standard-index=data-index={{index}}data-id=">{{item.item}}</view>        
      </block>
    "height:1px; width:100%;background-color:#eeeeee;">"selectCount">
    "countname">数量"countright">
      <i-input-number value={{commodityNum}}min="1" max={{store_count}}bindchange="handleCommodityNumber" />
    "submitBtn" "submitSelected">
    确定
  <i-message id="message" />

• index.wxss文件

.multipleStandard{
  display: flex;
  margin-top: 20rpx;
  padding: 15rpx justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px #ccc;
}
.item{
  margin-right: 15rpx;
}
.arrows{
  width: 16rpx;
  height: 27rpx;
}

/* 规格弹窗 */
.selectStandard {
  100%;
  1000rpx;
  background-color: #fff;
  position: fixed;
  z-index: 333;
  bottom: -600px;
  border-top-left-radius: border-top-right-radius: 20rpx;
}

/* 头部选中的规格 */
.tophead {
  margin: 30rpx 3%;
  94%;
  text-align: center;
}

.topimg {
  200rpx;
  200rpx;
}

.topimg image {
  border-radius: background-color: red;
}

.topright {
  margin-left: 30rpx;
  font-size: 28rpx;
  text-align: left;
  66%;
}
/* 关闭按钮 */
.selectClose {
  align-items: center;
}

.selectClose image {
  30rpx;
}

.standard {
  28rpx;
}

.standardTitle {
  20rpx;
}
.standardItem {
  flex-wrap: wrap;
    100%;
}
.selectItem {
  border: solid 1px #666;
  5rpx 23rpx;
  16rpx;
}
/* 规格选中时样式 */
.standardSelected{
  color: background: #f26740;
    background-color:#fe6732;
    border:solid margin:20rpx;
    padding:23rpx;
    border-radius:16rpx;
}
.standardNormal{
  #000;
}
.standardDisable{
  #eee;
}

/* 选择的数量 */
.selectCount {
  28rpx;
}
.countright {
  float: right;
  text-align: center;
  align-items: center;
}

.countname {
  margin-bottom: 30rpx;
}

.submitBtn {
  position: absolute;
  bottom: 0;
  70%;
  15% 20rpx 15%;
  66;
  80rpx;
  #fe6732;
  40rpx;
  color: white;
  32rpx;
  line-height: 80rpx;
}

• index.js文件

const {
    $Message
} = require('../../component/iview/base/index');
Page({
  data: {
    animationData: {},isSelect: ["standardNormal","standardSelected",68);">"standardDisable"],/* 用于区别当前的规格是否选中 */
    goods: {
      goods_name: "男鞋",128);">store_count: 158,128);">cost_price: "10.00",128);">original_img: "/images/commodity.jpg",},128);">commodityStandard: [
      [
        {
          spec_name: "颜色",128);">item_id: 535385,128);">item: "白色",128);">src: "",128);">isClick: 0
        },{
          535386,68);">"黑色",128);">0
        }
      ],[
        {
          "尺寸",128);">535692,68);">"170",128);">535693,68);">"180",68);">"重量",128);">552569,68);">"11",128);">552570,68);">"15",128);">0
        }
      ]
    ],128);">standardInfo: [
      {
        id: 1018269,key: "535385_535692_552569",128);">price: productprice: "0.00",128);">20
      },{
         1018270,68);">"535385_535692_552570",68);">"20.00",68);"> 1018271,68);">"535385_535693_552569",68);">"30.00",68);"> 1018272,68);">"535385_535693_552570",68);">"40.00",68);"> 1018273,68);">"535386_535692_552569",68);">"50.00",68);"> 1018274,68);">"535386_535692_552570",68);">"60.00",68);"> 1018275,68);">"535386_535693_552569",68);">"70.00",68);"> 1018276,68);">"535386_535693_552570",68);">"80.00",128);">18
      }
    ],128);">selectedId: [],128);">selectedStandard: [],128);">standardObject: {},128);">commodityNum: 1,128);">onLoad: function (options) {
    let goods = this.data.goods;
    let standardObject = this.data.standardObject;
    standardObject.price = goods.cost_price;
    standardObject.store_count = goods.store_count;
        let store_count = goods.store_count;
    this.setData({
      standardObject,store_count
    })
  },136);">/* 规格选择 */
  standardSelect() {
    var that = this
    var animal1 = wx.createAnimation({
      timingFunction: 'ease-in'
    }).translate(0,-600).step({
      duration: 300
    })
    that.setData({
      animationData: animal1.export(),})
  },136);">/* 关闭规格选择 */
  handleClose() {
    600).step({
      animationData: animal1.export()
    })
  },136);">/* 每个规格的点击事件 */
  handleStandardClick(e) {
    let id = e.currentTarget.dataset.id;
    // 总规格名称索引
    let standardIndex = e.currentTarget.dataset.standardIndex;
    // 单个规格名称索引
    let index = e.currentTarget.dataset.index;
    let commodityStandard = this.data.commodityStandard;
    let standardLength = commodityStandard[standardIndex].length;

    // 用于存储规格的id
    let selectedId = this.data.selectedId;
    // 用总规格名称索引来存储每个选中的规格id
    selectedId[standardIndex] = id;

    let selectedStandard = this.data.selectedStandard;

    // 在点击的时候，只需要对点击的这个规格所在的数组进行循环
    for (let i = 0; i < standardLength; i++) {
      // 找到对应的单个规格索引，并设置isClick及单个规格名称
      if (index == i) {
        commodityStandard[standardIndex][index].isClick = 1;
        selectedStandard[standardIndex] = commodityStandard[standardIndex][index].item;
      } else {
        commodityStandard[standardIndex][i].isClick = 0;
      }
    }

    // 将id用_连接起来
    let mergeId = selectedId.join('_');
    console.log(mergeId);
    let mergeStandard = selectedStandard.join('  ');
    console.log(mergeStandard);

    let standardInfo = this.data.standardInfo;
    let standardInfoLength = standardInfo.length;
    // 用于存储选中的规格
    let standardObject = {};

    for (let i = 0; i < standardInfoLength; i++) {
      if (standardInfo[i].key == mergeId) {
        standardObject = standardInfo[i];
        break;
      } else {
        standardObject = this.data.standardObject;
      }
    }

    this.setData({
      currentId: id,commodityStandard,selectedId,standardObject,mergeStandard,selectedStandard,})

  },136);">/* 选择数量 */
  handleCommodityNumber(e) {
      let commodityNum = e.detail.value;
      if (commodityNum >= this.data.store_count) {
          commodityNum = this.data.store_count;
      }
      this.setData({
          commodityNum
      })
  },136);">/* 保存选择的规格 */
  submitSelected() {
      let selectedStandard = this.data.selectedStandard;
      let length = selectedStandard.length;
      console.log(length)
      if (length == 0) {
          $Message({
              content: '请选择规格',128);">type: 'error'
          });
          return false;
      }
      for (let i = 0; i < length; i++) {
          if (length < this.data.commodityStandard.length) {
              $Message({
                  'error'
              });
              break;
          }
          if (selectedStandard[i] == undefined) {
              $Message({
                  'error'
              });
              break;
          }
      }
      $Message({
          '选择成功',68);">'success'
      });
  },})

• 我这里提示信息使用了插件iview，可以在官网直接下载后使用

iview weapp

3.部分思路及改进方法

开始想到的是将需合并的id的位置写死，比如，第一个位置就传第一个规格里选中的规格id，第二个位置就传第二个规格里选中的规格id,不过此时有问题，就是后台的id拼接是根据当前规格长度来拼接的，从最短的开始往长的拼接，然后，长度相等的时候，我这边的话，后台是从第一个开始拼接的，而且你选规格时，也可能是随机点的，此时若是采用第一种位置写死的方法就会有问题，因为会找不到对应的合并后的规格id

• 因为我这里一开始用的数据就刚好满足我的设想，但是后面换了个数据后就出现问题了
• index.wxml文件也做部分修改,可以直接查找下，类名为standardItem

data-name=</view>        
  </block>
</view>

*增加另一种模拟数据

goods: {
  goods_name:   store_count: 95,115);">  market_price:   shop_price: "101.00",115);">  cost_price:   original_img:   store_id: 170,115);">commodityStandard: [
  [
    {
      spec_name:       item_id: 532825,115);">      item:       src:       isClick: 0
    },{
532826,128);">532827,68);">"红色",128);">0
    }
  ],[
    {
"大小",128);">532828,68);">"160",128);">532829,68);">"150",128);">552581,68);">"10",128);">0
    }
  ]
],136);">/* 这里合并规格的信息 */
spec_goods_price: [
  {
    id: 1018286,115);">    key: "552581_532828_532825",115);">    price:     productprice:     store_count: 9
  },128);">1018287,68);">"552581_532828_532826",128);">10
  },128);">1018288,68);">"552581_532828_532827",128);">1018289,68);">"552581_532829_532825",128);">1018290,68);">"552581_532829_532826",128);">7
  },128);">1018291,68);">"552581_532829_532827",128);">10
  }
],

• index.js文件

onLoad: function (options) {
    let goods = this.data.goods;
    /* 用于存储对应的价格及库存 */
    let standardObject = this.data.standardObject;
    standardObject.price = goods.cost_price;
    standardObject.store_count = goods.store_count;
    
    let spec_goods_price =this.data.spec_goods_price;
    if (spec_goods_price) {
      this.checkPrice(spec_goods_price);
    }
    this.setData({
      standardObject,})
},handleStandardClick: function (e) {
    // 总规格名称索引
    let standardIndex = e.currentTarget.dataset.standardIndex;
    let id = e.currentTarget.dataset.id;
    /* 存储选中的规格名称 */
    let name = e.currentTarget.dataset.name;
    let selectedStandard = this.data.selectedStandard;
    selectedStandard[standardIndex] = name;
    let mergeStandard = selectedStandard.join('  ');
    let Specifications = this.data.Specifications;
    Specifications[standardIndex] = id;
    console.log(mergeStandard)
    this.setData({
      Specifications,})
    this.checkPrice(this.data.spec_goods_price);
},136);">/*在还未选择完规格时，暂时选用第一个合并后的规格价格及库存*/
checkPrice: function (spec_goods_price) {
    let standardObject = this.data.standardObject;
    if (!this.checkSpecifications(spec_goods_price)) {
      standardObject.price = spec_goods_price[0].price;
      standardObject.store_count = spec_goods_price[0].store_count;
      this.setData({
        standardObject,})
    }
},136);">/* 保存及校验是否选好了规格 */
submitSelected: function (e) {
    let spec_goods_price = this.data.spec_goods_price;
    let i = 0;
    let optionid = "";
    if (spec_goods_price) {
        optionid = this.checkSpecifications();
        if (optionid) {
            $Message({
              content: 'success'
            });
        } else {
            $Message({
              content: 'error'
            });
        }
    }
},checkSpecifications(spec_goods) {
    let spec_goods_price = spec_goods || this.data.spec_goods_price;
    let Specifications = this.data.Specifications;
    let SpecificationsLength = spec_goods_price[0].key.split("_").length;
    let standardObject = this.data.standardObject;
    if (Specifications.length != SpecificationsLength) {
      return false;
    } else {
      for (let i = 0; i < spec_goods_price.length; i++) {
        /* 若selectSpecifications全为true，则选中了对应的合并后的规格 */
        let selectSpecifications = true;
        for (let j = 0; j < Specifications.length; j++) {
          if (spec_goods_price[i].key.indexOf(Specifications[j]) == -1) {
            selectSpecifications = false;
            break;
          }
        }
        if (selectSpecifications) {
          standardObject.price = spec_goods_price[i].price;
          standardObject.store_count = spec_goods_price[i].store_count;
          this.setData({
            standardObject,})
          return spec_goods_price[i].id;
        }
      }
    }
    return false;
},255);'>
利用indexOf来判断合并后的key值，就不用通过写死位置存储规格，然后这里用了动画，可以自己查看官方完档微信创建动画

这里的规格啥的，格式可能会是多样的，我这里的话，就是返回这样的格式，其实我还想实现就是根据库存来判断是否可以点击，比如选尺码28，然后可能颜色为黑色的就库存不足，此时，是不能让他点击的，日后会在做下这个功能，欢迎大家在评论区指正，共同进步^_^


正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!