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

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

wxml

<view wx:for='{{list}}' wx:key='' class='container'>
  <view>
    <text name='name'>{{item.name}}</text>
    <text name='price'>{{item.price}}</text>
    <text bindtap='minus' class='minus' data-index='{{item.menuid}}'>-</text>
    <text name='num'>{{item.num}}</text>
    <text bindtap='plus' class='plus' data-index='{{item.menuid}}'>+</text>
    <text>{{item.price * item.num}}</text>
  </view>
</view>

<view>
{{price_ttl}}
</view>

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
      })
    })
  },

云开发数据库

结束啦，哈哈！

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