uniapp制作--进步器的选择

介绍：

        进步器的选择,一般用于商城购物选择物品数量的场景

        注意：该输入框只能输入大于或等于0的整数    

效果展示：

   

代码展示：

        

    以下是一个简单的购物车页面示例，包括选择商品和显示数量的功能：

        在这个示例中，我们展示了一个简单的购物车页面，包括商品名称、价格和数量。通过点击 "+" 和 "-" 按钮来增加或减少商品数量，并保证数量不少于 1。你可以根据实际需求和设计风格进行修改和扩展。

<template>
  <view class="container">
    <view v-for="(item, index) in productList" :key="index" class="product-item">
      <view class="product-info">
        <view class="product-name">{{ item.name }}</view>
        <view class="product-price">¥ {{ item.price }}</view>
      </view>
      <view class="product-action">
        <view class="select-box">
          <view class="select-minus" @click="decreaseQuantity(index)">-</view>
          <view class="select-quantity">{{ item.quantity }}</view>
          <view class="select-plus" @click="increaseQuantity(index)">+</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        { name: '商品1', price: 50, quantity: 1 },
        { name: '商品2', price: 60, quantity: 1 },
        { name: '商品3', price: 70, quantity: 1 },
        // 可以根据需要添加更多的商品
      ]
    };
  },
  methods: {
    increaseQuantity(index) {
      this.productList[index].quantity++;
    },
    decreaseQuantity(index) {
      if (this.productList[index].quantity > 1) {
        this.productList[index].quantity--;
      }
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 16px;
  color: #333;
}

.product-price {
  font-size: 14px;
  color: #999;
}

.product-action {
  display: flex;
  align-items: center;
}

.select-box {
  display: flex;
  align-items: center;
}

.select-minus,
.select-plus {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 20px;
  cursor: pointer;
}

.select-quantity {
  width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 5px;
}
</style>

        以上是一个使用原生态uniapp制作的进步器。