小程序 全网最简单购物车 即抄即用

对于许多像我一样的小程序菜鸟而言，不想要任何酷炫的界面，只想要立刻看到代码跑起来和最基础功能的实现，下面我就呈上代码，简单粗暴，包教包会，复制粘贴了就能跑，嘻嘻。

wxml

  
    {{item.name}}
    {{item.price}}
    -
    {{item.num}}
    +
    {{item.price * item.num}}
  



{{price_ttl}}

wxss

.container{
  display: flex;
  align-content: center;
}

JS

这里要注意minus和plus的判断方法和赋值是不一样的

const db=wx.cloud.database()
Page({
  data: {
    price_ttl:0
  },

  minus:function(e){
    var list=this.data.list
    var index=e.currentTarget.dataset.index
    var num=list[index].num
    if(num>0){
      num--
    }   
    list[index].num=num
    var price_ttl=0
    for (var i = 0; i < list.length; i++) {
      price_ttl += list[i].price * list[i].num
    }
    this.price_tt()
    this.setData({
      list:list,
      price_ttl:price_ttl
    })
  },

  plus: function (e) {
    var index = e.currentTarget.dataset.index
    var price=this.data.list[index].price
    var num = this.data.list[index].num++
    var list = this.data.list
    var price_ttl = 0
    for (var i = 0; i < list.length; i++) {
      price_ttl += list[i].price * list[i].num
    } 
    this.setData({
      list:list,
      price_ttl:price_ttl
    })
  },
 onLoad: function (options) {
    db.collection('order').get().then(res => {
      console.log(res.data)
      this.setData({
        list: res.data
      })
    })
  },

云开发数据库

结束啦，哈哈！

如果还有疑问的欢迎在评论区热烈交流。谢谢！