微信小程序中遇到的多规格问题(一)

刚进入公司的时候就有遇到过多规格的问题，当时就觉得很麻烦，就只是看了下，没有尝试，最近在写微信小程序的时候，又遇到了多规格问题，就自己尝试了下，在这里记录下

1.效果图

2.文件及部分思路

• index.wxml文件

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

• index.wxss文件

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

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

/* 头部选中的规格 */
.tophead {
  display: flex;