HarmonyOS实现购物车列表,增加,减少数量

目录

一:功能概述

二:代码实现

三:效果图


一:功能概述

上一节我们只是简单的展示了购物车的数据,这一节我们来实现购物车商品的增加和减少,并且数量和价格数据的实时更新。首先我们定义一个全局变量用来显示数量和总价,使用Counter组件实现增加和减少事件触发购物车列表数据更新,同时更新总价和总量。

二:代码实现

1:定义参数

@State newArray:goods[] = [];

 @State totalPrice :number =0
  @State totalCount:number =0

2:增减按钮实现

 Row(){
          Counter(){
            Text('3').fontSize(12)
          }.width(100).height(20)
          .onInc(()=>{

            if (Number(item.sales_num) <50) {

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个简单的实现: HTML部分: ```html <div class="product"> <div class="name">商品名称:XXX</div> <div class="price">价格:100元</div> <div class="quantity"> <button class="minus">-</button> <span class="count">0</span> <button class="plus">+</button> </div> </div> ``` JavaScript部分: ```javascript // 获取所有商品元素 const products = document.querySelectorAll('.product'); // 循环遍历每个商品元素 products.forEach(product => { // 获取该商品的加减按钮、数量和价格元素 const minusBtn = product.querySelector('.minus'); const plusBtn = product.querySelector('.plus'); const countEl = product.querySelector('.count'); const priceEl = product.querySelector('.price'); // 获取商品的单价 const price = parseInt(priceEl.textContent.split(':')[1]); // 初始化商品数量为0 let count = 0; // 点击加号按钮时,增加商品数量并计算总价 plusBtn.addEventListener('click', () => { count++; countEl.textContent = count; priceEl.textContent = `价格:${price * count}元`; }); // 点击减号按钮时,减少商品数量并计算总价,但数量不得小于0 minusBtn.addEventListener('click', () => { if (count > 0) { count--; countEl.textContent = count; priceEl.textContent = `价格:${price * count}元`; } }); }); ``` 这段代码实现了一个简单的购物车,当点击加号按钮时,商品数量和总价都会增加;当点击减号按钮时,商品数量和总价都会减少。注意,商品数量不得小于0。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮的梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值