小程序原生购物车

最新推荐文章于 2021-07-06 15:49:50 发布

myl_myl

最新推荐文章于 2021-07-06 15:49:50 发布

阅读量198

点赞数

本文链接：https://blog.csdn.net/weixin_45208546/article/details/99718183

版权

本文介绍了如何在小程序中实现原生购物车功能，包括关键的排版设计和JavaScript实现细节。

摘要由CSDN通过智能技术生成

排版

<span data-index="{
  {index}}" data-item="{
  {item}}" bindtap="clickjian">-</span>
<span>{
  {item.item}}</span>
<span data-index="{
  {index}}" data-item="{
  {item}}" bindtap="clickjia">+</span>
</view>
<view>{
  {nums}}-----{
  {prices}}</view>

js

data
   list: [{
      price: 20,
      item: 0
    }, {
      price: 10,
      item: 0
    }, {
      price: 50,
      item: 0
    }],
    nums: 0,
    prices:0



clickjian(e) {
   var index=e.target.dataset.index
   var list=this.data.list

   var num=list[index].item;
   if(num<=0){
     return
   }else{
     num--
     list[index].item=num
     this.setData({
       list
     })
   }
    this.nums()
    this.prices()
  },
  c