前端处理多分类不固定选择

相信大家都用过点奶茶的小程序吧,当你选择规格时有没有想过,分类是不固定的,每个分类下的规格也是不固定的,那我怎么才能做到选择规格时改变样式,并把当前选中的规格拿到传给后端呢?
接下来给大家看一段后端返回数据和前端渲染(这是一个微信小程序端的,进来的同学学习一个思路)

这是后端返来的数据,specParam字段下是商品的规格(这个数组的长度是不固定的,不同商品的字段多少是不一样的),ownSpec字段是根据specParam来用的,就是拿specParam的索引去渲染ownSpec,最后的效果是这样的,要求就是点击规格,样子改变,并收集你选中的值,如果是你,你打算怎么做?

<view class="detail-name">{{productInfo.title}}</view>
<view class="detail-content" wx:if="{{productInfo.subTitle!=null}}">{{productInfo.subTitle}}</view>
<view class="detail-tip">图片仅供参考，请以实物为准，建议尽快饮用。</view>
      <view wx:for="{{productInfo.specParam}}" wx:for-item="first" wx:key="index" wx:for-index="index">
      <view class="custom-title">{{first}}</view>
          <view style="display: flex;align-items: center;">
          <!--newArrs就是那个创建的数组 -->
          <view class="{{newArrs[index]==index2?'custom-tag':'default-tag'}}" 
          wx:for="{{productInfo.ownSpec[index]}}" wx:forindex="index2"
         wx:key="index2" wx:for-item="two" 
         data-current2="{{index2}}" data-current="{{index}}" 
            bindtap="handeGuige">{{two}}</view>
    		</view>
 </view>

这块儿是我渲染的代码,下面我还解释一下清楚这块儿的"关键词"与"逻辑",沉下心看完,如果不会的同学学得到了后续遇到这种问题就有思路了
首先,第一次for循环,循环的是图一中贴的specParam种类字段,之后我拿着第一层for循环的索引,去循环渲染ownSpec字段,糖分对应"全糖,半糖"等,这种的默认选择,都会是默认选择每个种类下的第一个,我就可以根据specParam字段的长度,去创建一个数组,拿这个举例子,创建的数组就是newArrs,这个newArrs=[0,0],这个[0,0]就代表的是ownSpec这两个数组下的第0个元素,接下来就可以根据三目来判断这个表达式是否成立来改变样式了,当你点击选择规格的时候,就是修改newArrs数组数据的时候,点击传入这个两次循环的index值,定位到修改newArrs数组的第几个,修改成什么

 // 选择规格
  handeGuige(e) {
    console.log(e)
    let arr =this.data.newArrs
    let index=e.currentTarget.dataset.current
    let index2=e.currentTarget.dataset.current2
    arr[index]=index2
    this.setData({
      specifi: e.target.dataset.current,
      newArrs:arr
    })
  },

这样就完成了,点击就可以正常切换样式了,同时newArrs这个数组也会拿到不同种类规格下的索引