mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

微信小程序实战篇,微信小程序实战篇之购物车

时间:2019-06-04 19:57来源:www.mg4377.com
哈喽,大家好,快半个月没写了,以往提笔都有一些猛烈了,一贯没更新的由来,3个是代码君也要上班,加上近年来专门的学问比较忙,还大概有便是写小说平素未被承认,所以没什么

哈喽,大家好,快半个月没写了,以往提笔都有一些猛烈了,一贯没更新的由来,3个是代码君也要上班,加上近年来专门的学问比较忙,还大概有便是写小说平素未被承认,所以没什么引力再次创下作了,那时真正持之以恒不下来,准备吐弃了,多谢读者曹明,多少个大韩民国时期的博士读者,协理本人,并给自家鼓励,期待作者更新下壹篇,作者非凡振撼,弹指间战争力恢复生机,其实你们简单的点赞,商议,都以给笔者最大的协助,好了,煽动和挑逗情绪完成,该讲今日的主要性了,购物车,购物车的分界面实现到不是很难,难题是拍卖个中的逻辑,无论是小程序,照旧应用程式,购物车的逻辑都以最难的,上边伊始教大家哪些促成购物车了,先上效果图

微信小程序实战篇之购物车的贯彻代码示例,实战篇购物车

微信小程序实战篇,微信小程序实战篇之购物车的兑今世码示例。哈喽,我们好,快半个月没写了,以往提笔都有一些生硬了,一向没更新的因由,二个是代码君也要上班,加上近年来做事相比较忙,还会有正是写作品一贯未被承认,所以没什么重力更创作了,那时真正坚定不移不下来,筹算放任了,感激读者曹明,三个南朝鲜的硕士读者,援助本人,并给自己鼓励,期待笔者更新下一篇,小编相当激动,刹那间战役力苏醒,其实你们轻巧的点赞,冲突,都以给本人最大的支撑,好了,煽情实现,该注明天的重点了,购物车,购物车的分界面完成到不是很难,难题是拍卖之中的逻辑,无论是小程序,依旧应用程式,购物车的逻辑都是最难的,上边开头教我们如何达成购物车了,先上效果图

图片 1

购物车实现

cart.wxml

<import src="/template/quantity/index.wxml" />
<scroll-view class="scroll" scroll-y="true">
 <view class="separate"></view>
 <view wx:for="{{carts}}">
  <view class="cart_container">
   <image class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" src="{{item.isSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" />

   <image class="item-image" src="{{item.pic}}"></image>

   <view class="column">
    <text class="title">{{item.name}}</text>
    <view class="row">
     <text class="sku-price">¥</text>
     <text class="sku-price">{{item.price}}</text>
     <view class="sku">
      <template is="quantity" data="{{ ...item.count, componentId: index }}" />
     </view>
    </view>

   </view>
  </view>
  <view class="separate"></view>
 </view>
</scroll-view>
<view class="bottom_total">
 <view class="bottom_line"></view>

 <view class="row">
  <image class="item-allselect" bindtap="allSelect" src="{{isAllSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" />
  <text class="small_text">全选</text>
  <text>合计:¥ </text>
  <text class="price">{{totalMoney}}</text>
  <button class="button-red" bindtap="toBuy" formType="submit">去结算</button>
 </view>
</view>

布局不是很复杂,3个循环列表,循环出购物车物品,外加贰个付账的最底层控件,还索要提示的是,循环列表外面要加1层scroll-view,那样当数码许多是时候,能够滚动,面生scroll-view的,请自行翻看眼下几篇小说,里面有教书

cat.wxss

/* pages/cart/cart.wxss */
.cart_container {
 display: flex;
 flex-direction: row;
}
.scroll {
 margin-bottom: 120rpx;
}
.column {
 display: flex;
 flex-direction: column;
}
.row {
 display: flex;
 flex-direction: row;
 align-items: center;
}
.sku {
 margin-top: 60rpx;
 margin-left: 100rpx;
}
.sku-price {
 color: red;
 position: relative;
 margin-top: 70rpx;
}
.price {
 color: red;
 position: relative;
}
.title {
 font-size: 38rpx;
 margin-top: 40rpx;
}
.small_text {
 font-size: 28rpx;
 margin-right: 40rpx;
 margin-left: 10rpx;
}
.item-select {
 width: 40rpx;
 height: 40rpx;
 margin-top: 90rpx;
 margin-left: 20rpx;
}
.item-allselect {
 width: 40rpx;
 height: 40rpx;
 margin-left: 20rpx;
}
.item-image {
 width: 180rpx;
 height: 180rpx;
 margin: 20rpx;
}
.bottom_line {
 width: 100%;
 height: 2rpx;
 background: lightgray;
}
.bottom_total {
 position: fixed;
 display: flex;
 flex-direction: column;
 bottom: 0;
 width: 100%;
 height: 120rpx;
 line-height: 120rpx;
 background: white;
}
.button-red {
 background-color: #f44336; /* 红色 */
}
button {
 position: fixed;
 right: 0;
 color: white;
 text-align: center;
 display: inline-block;
 font-size: 30rpx;
 border-radius: 0rpx;
 width: 30%;
 height: 120rpx;
 line-height: 120rpx;
}

wxss样式没什么可说的,掌握其个性,调用class就好,器重说一下cart.js,全篇的逻辑都在那中间

cart.js

// pages/cart/cart.js
var Temp = require('../../template/contract.js');
Page(Object.assign({}, Temp.Quantity, {
 data: {
  isAllSelect:false,
  totalMoney:0,
  // 商品详情介绍
  carts: [
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg",
    name:"日本资生堂洗颜",
    price:200,
    isSelect:false,
    // 数据设定
    count: {
     quantity: 2,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
    name: "倩碧焕妍活力精华露",
    price: 340,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
    name: "特效润肤露",
    price: 390,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 3,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
    name: "倩碧水嫩保湿精华面霜",
    price: 490,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
    name: "兰蔻清莹柔肤爽肤水",
    price: 289,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 10,
     min: 1,
     max: 20
    },
   },
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
    name: "LANCOME兰蔻小黑瓶精华",
    price: 230,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
  ],
 },

 //勾选事件处理函数 
 switchSelect: function (e) {
  // 获取item项的id,和数组的下标值 
  var Allprice = 0,i=0;
  let id = e.target.dataset.id,

  index = parseInt(e.target.dataset.index);
  this.data.carts[index].isSelect = !this.data.carts[index].isSelect;
  //价钱统计
  if (this.data.carts[index].isSelect) {
   this.data.totalMoney = this.data.totalMoney   this.data.carts[index].price;
  }
  else {
   this.data.totalMoney = this.data.totalMoney - this.data.carts[index].price;
  }
  //是否全选判断
  for (i = 0; i < this.data.carts.length; i  ) {
   Allprice = Allprice   this.data.carts[i].price;
  }
  if (Allprice == this.data.totalMoney)
  {
   this.data.isAllSelect=true;
  }
  else 
  {
   this.data.isAllSelect = false;
  }
  this.setData({
   carts: this.data.carts,
   totalMoney: this.data.totalMoney,
   isAllSelect: this.data.isAllSelect,
  })
 },
 //全选
 allSelect: function (e) {
  //处理全选逻辑
  let i = 0;
  if (!this.data.isAllSelect)
  {
   for (i = 0; i < this.data.carts.length; i  ) {
    this.data.carts[i].isSelect = true;
    this.data.totalMoney = this.data.totalMoney   this.data.carts[i].price;
   }
  }
  else
  {
   for (i = 0; i < this.data.carts.length; i  ) {
    this.data.carts[i].isSelect = false;
   }
   this.data.totalMoney=0;
  }
  this.setData({
   carts: this.data.carts,
   isAllSelect: !this.data.isAllSelect,
   totalMoney: this.data.totalMoney,
  })
 },
 // 去结算
 toBuy() {
  wx.showToast({
   title: '去结算',
   icon: 'success',
   duration: 3000
  });
  this.setData({
   showDialog: !this.data.showDialog
  });
 },
 //数量变化处理
 handleQuantityChange(e) {
  var componentId = e.componentId;
  var quantity = e.quantity;
  this.data.carts[componentId].count.quantity = quantity;
  this.setData({
   carts: this.data.carts,
  });
 }
}));

介绍一下用到的参数

  1. isAllSelect:是不是全选
  2. totalMoney:总金额
  3. carts :购物车物品数量

switchSelect 勾选按键必要做的逻辑管理

  1. 看清是还是不是达到规定的标准任何勾选,假使一切勾选,尾巴部分的全选开关要点亮,推断依据是,价钱是不是等于总价,当然那只是1种决断方法,读者也得以透过勾选的数目剖断,
  2. 对勾选或撤消的按键,举行总价的加减法计算
  3. this.setData,更新数据,那些是入眼,每一次管理完数据,都要记得更新数据

allSelect 全选开关的逻辑管理

  1. 全选就把每一个item勾选Logo点亮,然后总括总价钱,不全选就置为深紫红,总价钱为0
  2. this.setData更新数据

微信小程序数据管理

壹、修改数据方式

data:{
 name:'我是初始化的name'
}

1、this.data.name

this.data.name='我是代码君data'

2、this.setData

 this.setData({
   name:'我是代码君setData'
  })

那两种办法都可以退换多少,this.setData的裨益是能够有刷新的效用,即实时更新数据

2、修改对象数组

data:{
person:{
 name:'代码君',
 city:'厦门'
}
}

修改总体指标

this.setData({
   person:{
    name:'新代码君',
    city:'湖南'
   }
  })

修改部分数据

this.setData({
   'person.name': '代码君只修改名字'
  })
//多个数组用这个
this.setData({
   'person[0].name': '代码君只修改名字'
  })

叁、加多删减数据

一、增多数量concat

//假设这一段是我们要新增的数组
var newarray = [{
    name:'增加的数据--' new Date().getTime() ,
}];
//向前--用newarray与this.data.list合拼
this.data.list = newarray.concat(this.data.list);
//向后--用this.data.list与newarray合拼
this.data.list = this.data.list.concat(newarray);

2、删除数据splice()删除数据,然后回到被删去的数码

//删除
 remove:function (e){
  var dataset = e.target.dataset;
  var Index = dataset.index;
  //通过index识别要删除第几条数据,第二个数据为要删除的项目数量,通常为1
  this.data.list.splice(Index,1);
  //渲染数据
  this.setData({
    list:this.data.list
  });
 }

三、清空数据

//清空
 clear:function (){
  //其实就是让数组变成一个空数组即可
   this.setData({
     list:{}
   });
 }

总结

后天根本教学js是什么样管理数据逻辑的,也疏解了数量的增加和删除改查,这是供给的知识项,回去要多多演习。好了前几天就讲到那,祝我们周末欢悦~

上述正是本文的全体内容,希望对我们的读书抱有帮助,也冀望大家多多援救帮客之家。

哈喽,大家好,快半个月没写了,今后提笔都有一点点猛烈了,平昔没更新的缘故,...

哈喽,大家好,快半个月没写了,将来提笔都有一些猛烈了,平素没更新的由来,三个是代码君也要上班,加上多年来干活比较忙,还也可能有正是写文章从来未被认同,所以没什么重力再撰写了,这时真的坚定不移不下去,策画放任了,感激读者曹明,三个南韩的大学生读者,帮助本人,并给自家鼓励,期待笔者更新下壹篇,小编非常震惊,弹指间大战力苏醒,其实你们轻巧的点赞,争论,都以给作者最大的帮助,好了,煽动和挑逗情绪实现,该讲明日的重视了,购物车,购物车的分界面实现到不是很难,难点是拍卖个中的逻辑,无论是小程序,依然应用软件,购物车的逻辑都以最难的,上面初始教大家怎么促成购物车了,先上效果图

动用AngularJS完毕四个简便的购物车,主要感受庞大的双向绑定和只关心对象不关注分界面个性。

图片 2

图片 3购物车.gif

先看看界面:

购物车达成

  1. cart.wxml

图片 4

cart.wxml

点击 -操作和删除:

<import src="/template/quantity/index.wxml" />
<scroll-view class="scroll" scroll-y="true">
 <view class="separate"></view>
 <view wx:for="{{carts}}">
  <view class="cart_container">
   <image class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" src="{{item.isSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" />

   <image class="item-image" src="{{item.pic}}"></image>

   <view class="column">
    <text class="title">{{item.name}}</text>
    <view class="row">
     <text class="sku-price">¥</text>
     <text class="sku-price">{{item.price}}</text>
     <view class="sku">
      <template is="quantity" data="{{ ...item.count, componentId: index }}" />
     </view>
    </view>

   </view>
  </view>
  <view class="separate"></view>
 </view>
</scroll-view>
<view class="bottom_total">
 <view class="bottom_line"></view>

 <view class="row">
  <image class="item-allselect" bindtap="allSelect" src="{{isAllSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" />
  <text class="small_text">全选</text>
  <text>合计:¥ </text>
  <text class="price">{{totalMoney}}</text>
  <button class="button-red" bindtap="toBuy" formType="submit">去结算</button>
 </view>
</view>
<import src="/template/quantity/index.wxml" /><scroll-view scroll-y="true"> <view ></view> <view wx:for="{{carts}}"> <view > <image bindtap="switchSelect" data-index="{{index}}" data- src="{{item.isSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" /> <image src="{{item.pic}}"></image> <view > <text >{{item.name}}</text> <view > <text >¥</text> <text >{{item.price}}</text> <view > <template is="quantity" data="{{ ...item.count, componentId: index }}" /> </view> </view> </view> </view> <view ></view> </view></scroll-view><view > <view ></view> <view > <image bindtap="allSelect" src="{{isAllSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" /> <text >全选</text> <text>合计:¥ </text> <text >{{totalMoney}}</text> <button bindtap="toBuy" formType="submit">去结算</button> </view></view>

图片 5

布局不是很复杂,贰个循环列表,循环出购物车货品,外加3个付账的平底控件,还必要提示的是,循环列表外面要加一层scroll-view,那样当数码繁多是时候,能够滚动,不熟稔scroll-view的,请自行翻看前边几篇小说,里面有讲授

布局不是很复杂,三个循环列表,循环出购物车货品,外加二个买下账单的底层控件,还索要提示的是,循环列表外面要加1层scroll-view,那样当数码许多是时候,可以滚动,不纯熟scroll-view的,请自行翻看前面几篇文章,里面有教书

这一个全部只须求操作数据源就行,无需关心分界面。

cat.wxss

  1. cat.wxss

兑现进程:

/* pages/cart/cart.wxss */
.cart_container {
 display: flex;
 flex-direction: row;
}
.scroll {
 margin-bottom: 120rpx;
}
.column {
 display: flex;
 flex-direction: column;
}
.row {
 display: flex;
 flex-direction: row;
 align-items: center;
}
.sku {
 margin-top: 60rpx;
 margin-left: 100rpx;
}
.sku-price {
 color: red;
 position: relative;
 margin-top: 70rpx;
}
.price {
 color: red;
 position: relative;
}
.title {
 font-size: 38rpx;
 margin-top: 40rpx;
}
.small_text {
 font-size: 28rpx;
 margin-right: 40rpx;
 margin-left: 10rpx;
}
.item-select {
 width: 40rpx;
 height: 40rpx;
 margin-top: 90rpx;
 margin-left: 20rpx;
}
.item-allselect {
 width: 40rpx;
 height: 40rpx;
 margin-left: 20rpx;
}
.item-image {
 width: 180rpx;
 height: 180rpx;
 margin: 20rpx;
}
.bottom_line {
 width: 100%;
 height: 2rpx;
 background: lightgray;
}
.bottom_total {
 position: fixed;
 display: flex;
 flex-direction: column;
 bottom: 0;
 width: 100%;
 height: 120rpx;
 line-height: 120rpx;
 background: white;
}
.button-red {
 background-color: #f44336; /* 红色 */
}
button {
 position: fixed;
 right: 0;
 color: white;
 text-align: center;
 display: inline-block;
 font-size: 30rpx;
 border-radius: 0rpx;
 width: 30%;
 height: 120rpx;
 line-height: 120rpx;
}

壹、使用其余语言创设五个服务端:

wxss样式没什么可说的,理解其性质,调用class就好,注重说一下cart.js,全篇的逻辑都当中

/* pages/cart/cart.wxss */.cart_container { display: flex; flex-direction: row;}.scroll { margin-bottom: 120rpx;}.column { display: flex; flex-direction: column;}.row { display: flex; flex-direction: row; align-items: center;}.sku { margin-top: 60rpx; margin-left: 100rpx;}.sku-price { color: red; position: relative; margin-top: 70rpx;}.price { color: red; position: relative;}.title { font-size: 38rpx; margin-top: 40rpx;}.small_text { font-size: 28rpx; margin-right: 40rpx; margin-left: 10rpx;}.item-select { width: 40rpx; height: 40rpx; margin-top: 90rpx; margin-left: 20rpx;}.item-allselect { width: 40rpx; height: 40rpx; margin-left: 20rpx;}.item-image { width: 180rpx; height: 180rpx; margin: 20rpx;}.bottom_line { width: 100%; height: 2rpx; background: lightgray;}.bottom_total { position: fixed; display: flex; flex-direction: column; bottom: 0; width: 100%; height: 120rpx; line-height: 120rpx; background: white;}.button-red { background-color: #f44336; /* 红色 */}button { position: fixed; right: 0; color: white; text-align: center; display: inline-block; font-size: 30rpx; border-radius: 0rpx; width: 30%; height: 120rpx; line-height: 120rpx;}
  public class ShoppingCar
  {
    public string Title { get; set; }
    public decimal UnitPrice { get; set; }
    public int Count { get; set; }
  }


public ActionResult GetCar()
    {
      List<ShoppingCar> cars = new List<ShoppingCar>
      {
        new ShoppingCar { Title="苹果",Count=1,UnitPrice=2.5m},
        new ShoppingCar { Title="香蕉",Count=3,UnitPrice=1.5m},
        new ShoppingCar { Title="苦瓜",Count=1,UnitPrice=3.5m},
        new ShoppingCar { Title="黄瓜",Count=3,UnitPrice=2.2m}
      };
      return Json(cars,JsonRequestBehavior.AllowGet);
    }

    public ActionResult AddCar(List<ShoppingCar> car)
    {
      return Json("ok", JsonRequestBehavior.AllowGet);
    }

cart.js

wxss样式没什么可说的,明白其天性,调用class就好,器重说一下cart.js,全篇的逻辑都在那在那之中

二、前台完结:

// pages/cart/cart.js
var Temp = require('../../template/contract.js');
Page(Object.assign({}, Temp.Quantity, {
 data: {
  isAllSelect:false,
  totalMoney:0,
  // 商品详情介绍
  carts: [
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg",
    name:"日本资生堂洗颜",
    price:200,
    isSelect:false,
    // 数据设定
    count: {
     quantity: 2,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
    name: "倩碧焕妍活力精华露",
    price: 340,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
    name: "特效润肤露",
    price: 390,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 3,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
    name: "倩碧水嫩保湿精华面霜",
    price: 490,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
    name: "兰蔻清莹柔肤爽肤水",
    price: 289,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 10,
     min: 1,
     max: 20
    },
   },
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
    name: "LANCOME兰蔻小黑瓶精华",
    price: 230,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
  ],
 },

 //勾选事件处理函数 
 switchSelect: function (e) {
  // 获取item项的id,和数组的下标值 
  var Allprice = 0,i=0;
  let id = e.target.dataset.id,

  index = parseInt(e.target.dataset.index);
  this.data.carts[index].isSelect = !this.data.carts[index].isSelect;
  //价钱统计
  if (this.data.carts[index].isSelect) {
   this.data.totalMoney = this.data.totalMoney   this.data.carts[index].price;
  }
  else {
   this.data.totalMoney = this.data.totalMoney - this.data.carts[index].price;
  }
  //是否全选判断
  for (i = 0; i < this.data.carts.length; i  ) {
   Allprice = Allprice   this.data.carts[i].price;
  }
  if (Allprice == this.data.totalMoney)
  {
   this.data.isAllSelect=true;
  }
  else 
  {
   this.data.isAllSelect = false;
  }
  this.setData({
   carts: this.data.carts,
   totalMoney: this.data.totalMoney,
   isAllSelect: this.data.isAllSelect,
  })
 },
 //全选
 allSelect: function (e) {
  //处理全选逻辑
  let i = 0;
  if (!this.data.isAllSelect)
  {
   for (i = 0; i < this.data.carts.length; i  ) {
    this.data.carts[i].isSelect = true;
    this.data.totalMoney = this.data.totalMoney   this.data.carts[i].price;
   }
  }
  else
  {
   for (i = 0; i < this.data.carts.length; i  ) {
    this.data.carts[i].isSelect = false;
   }
   this.data.totalMoney=0;
  }
  this.setData({
   carts: this.data.carts,
   isAllSelect: !this.data.isAllSelect,
   totalMoney: this.data.totalMoney,
  })
 },
 // 去结算
 toBuy() {
  wx.showToast({
   title: '去结算',
   icon: 'success',
   duration: 3000
  });
  this.setData({
   showDialog: !this.data.showDialog
  });
 },
 //数量变化处理
 handleQuantityChange(e) {
  var componentId = e.componentId;
  var quantity = e.quantity;
  this.data.carts[componentId].count.quantity = quantity;
  this.setData({
   carts: this.data.carts,
  });
 }
}));
  1. cart.js
  <div ng-app="DemoApp" ng-controller='CartController'>
    <table class="table table-striped">
      <thead>
        <tr>
          <td>标题</td>
          <td>单价</td>
          <td>数量</td>
          <td>小计</td>
          <td>删除</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in ShoppingCar">
          <td>{{item.Title}}</td>
          <td>{{item.UnitPrice}}</td>
          <td>
            <input type="text" ng-cloak ng-model="item.Count" style="width:50px;text-align:center;">
            <button my-adds ng-click="UpdateCar(item.Title,1)" ng-class="{cursors:true}"> </button>
            <button my-minus ng-click="UpdateCar(item.Title,-1)" ng-class="{cursors:true}">-</button>
          </td>
          <td>{{item.Count*item.UnitPrice | number:2}}</td>
          <td><button my-minus ng-click="UpdateCar(item.Title,-100)" ng-class="{cursors:true}">删</button></td>
        </tr>
      </tbody>
    </table>
    <p ng-init=0>总价格:{{ total | number:2}}</p>
    <button type="button" ng-click="submit()">提交</button>
  </div>

介绍一下用到的参数

三、Angular部分  

编辑:www.mg4377.com 本文来源:微信小程序实战篇,微信小程序实战篇之购物车

关键词: 购物车 程序 实战篇