taro 小程序利用两层循环给选中的规格加样式

最新推荐文章于 2024-06-06 11:10:43 发布

withwz_

最新推荐文章于 2024-06-06 11:10:43 发布

阅读量1.5k

点赞数

分类专栏： react 文章标签：小程序

本文链接：https://blog.csdn.net/weixin_42519137/article/details/98487819

版权

react 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

小程序

4 篇文章 0 订阅

订阅专栏

1、获取两层数组循环索引，外层索引作十位数，内层索引作个位数，生成一个一维数组
2、再通过两层索引拼成的字符串同生成的数组中的索引作对比

className={`sku__item ${(index + '' + indes) === selectedSku[index] && "sku__item_active"}`}

完整代码

import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import NumberBox from '../number-box'
import './index.scss'

export default class SkuSelect extends Component {
  state = {
    skuList: [
      {
        id: 0,
        skuTitle: '颜色',
        skuItem: ['绿色', '白色', '红色', '蓝色', '紫色', '橙色']
      }, {
        id: 1,
        skuTitle: '尺寸',
        skuItem: ['12寸', '14寸', '16寸', '18寸', '20寸', '22寸', '24寸']
      },
    ],
    selectedSku: []
  }

  handleSkuClick(index, indes) {
    let tempSelectedSku = this.state.selectedSku
    tempSelectedSku[index] = index + '' + indes
    this.setState(() => {
      return {
        selectedSku: tempSelectedSku,
      }
    })
  }


  render() {
    let { skuList, selectedSku } = this.state
    return (
      <View className='sku-select__container'>
        <View className='goods'>
          <Image className='goods__img'></Image>
          <View className='description'>
            <View className='description__title __OV2H__'>
              时风手扶拖拉机大型机械润滑油/加油设备机
            </View>
            <View className='description__price'>￥378.00</View>
            <View className='description__stock'>库存20件</View>
            <View className='description__sku'>请选择 颜色 尺寸</View>
          </View>
        </View>
        {
          skuList.map((item, index) => {
            return (
              <View className='sku' key={item.id}>
                <View className='sku__title'>{item.skuTitle}</View>
                <View className='sku__list'>
                  {
                    item.skuItem.map((citem, indes) => {
                      return (
                        <View
                          onClick={this.handleSkuClick.bind(this, index, indes)}
                          className={`sku__item ${(index + '' + indes) === selectedSku[index] && "sku__item_active"}`}
                          key={citem}
                        >
                          {citem}
                        </View>
                      )
                    })
                  }
                </View>
              </View>
            )
          })
        }

        <NumberBox />
        <View className='confirm-btn'>确定</View>
      </View>
    )
  }
}

.sku-select__container {
  height: 1000px;
  background: white;

  .goods {
    display: flex;
    flex-direction: row;
    height: 270px;
    padding-top: 20px;

    &__img {
      flex-shrink: 0;
      background: red;
      width: 220px;
      height: 220px;
      margin-right: 20px;
    }

    .description {
      &__title {
        height: 60px;
        padding-right: 20px;
        padding-bottom: 30px;
        font-size: 32px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(40, 40, 40, 1);
        line-height: 36px;
      }

      &__price {
        color: orangered;
        font-size: 30px;
      }

      &__stock {
        color: #777777;
        font-size: 28px;
      }

      &__sku {
        color: rgba(40, 40, 40, 1);
        font-size: 28px;
      }
    }
  }

  .sku {
    &__title {
      font-size: 30px;
      color: #223322;
      font-weight: bold;
      margin-left: 20px;
    }

    &__list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .sku__item {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 15px;
        margin-bottom: 15px;
        padding-left: 20px;
        padding-right: 20px;
        background: rgb(241, 239, 239);
        border-radius: 6px;
        border: 1px solid #cccccc;
        font-size: 28px;
        color: #223322;

        &_active {
          border: 1px solid orangered;
          background: rgba($color: #ffffff, $alpha: 1.0)
        }
      }
    }
  }

  .confirm-btn {
    position: fixed;
    bottom: 20px;
    background: orangered;
    width: 710px;
    height: 80px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
  }
}