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

By admin in 4858美高梅 on 2019年8月24日

微信小程序 购物车轻易实例,小程序购物车实例

微信小程序,这里达成购物车功效的小demo,有需求此功用的对象能够参照下。

摘要: 加减商品数量,汇总价格,全选与全不选

陈设思路:

一、从网络上传来以下Json数据格式的数组 1.购物车id:cid 2.标题title
3.数据num 4.图纸地址 5.价钱price 6.小计 7.是或不是选中selected

二、点击复选框toggle操作 如曾经入选的,经点击产生未选中,反之而反之
点击凭借index作为标记,而不用cid,方便遍历

三、全选操作
第一遍点击即为全体入选,再度点击为全不选,全选开关本人也尾随toggle转变

四、点击买单开关,将已入选的cid数组抽出,以供通过网络提交到服务端,这里给个toast作为结果演示。

五、利用stepper作加减运算,一样基于index作为标识,点完写回num值。

六、布局,全选与结账按键底部对齐,购物车商店自适应中度,类似于Android的weight。

步骤:

千帆竞发数据渲染

1.1 布局与样式表

下面是三个物品列表,下方是三个全选按键与当下买单开关

商品列表左部为商品缩略图,右上为商品标题,右下为货色价位与数据,个中商品数量使用WXStepper来完结加减操作

js:开头化八个数据源,那往往是从互联网获取的,相关接口可参见:

Page({
  data:{
    carts: [
      {cid:1008,title:'Zippo打火机',image:'https://img12.360buyimg.com/n7/jfs/t2584/348/1423193442/572601/ae464607/573d5eb3N45589898.jpg',num:'1',price:'198.0',sum:'198.0',selected:true},
      {cid:1012,title:'iPhone7 Plus',image:'https://img13.360buyimg.com/n7/jfs/t3235/100/1618018440/139400/44fd706e/57d11c33N5cd57490.jpg',num:'1',price:'7188.0',sum:'7188.0',selected:true},
      {cid:1031,title:'得力订书机',image:'https://img10.360buyimg.com/n7/jfs/t2005/172/380624319/93846/b51b5345/5604bc5eN956aa615.jpg',num:'3',price:'15.0',sum:'45.0',selected:false},
      {cid:1054,title:'康师傅妙芙蛋糕',image:'https://img14.360buyimg.com/n7/jfs/t2614/323/914471624/300618/d60b89b6/572af106Nea021684.jpg',num:'2',price:'15.2',sum:'30.4',selected:false},
      {cid:1063,title:'英雄钢笔',image:'https://img10.360buyimg.com/n7/jfs/t1636/60/1264801432/53355/bb6a3fd1/55c180ddNbe50ad4a.jpg',num:'1',price:'122.0',sum:'122.0',selected:true},
    ]
  }
})

布局文件

<view class="container carts-list">
  <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
    <view>
     <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>
    </view>
   <view class="carts-text">
    <text class="carts-title">{{item.title}}</text>
    <view class="carts-subtitle">
     <text class="carts-price">{{item.sum}}</text>
     <text>WXStepper</text>
    </view>
   </view>
  </view>
</view>

样式表

/*外部容器*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

/*整体列表*/
.carts-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}

/*每行单元格*/
.carts-item {
  display: flex;
  flex-direction: row;
  height:150rpx;
  /*width属性解决标题文字太短而缩略图偏移*/
  width:100%;
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
}

/*左部图片*/
.carts-image {
  width:150rpx;
  height:150rpx;
}


/*右部描述*/
.carts-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*右上部分标题*/
.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
}

/*右下部分价格与数量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

/*价格*/
.carts-price {
  color: #f60;
}

4858美高梅 1

1.2 集成WXStepper

1.2.1 复制组件内容

[2016-10-16]

将stepper.wxss的内容复制到cart.wxss中

将stepper.wxml的原委复制到cart.wxml中

与事先的单纯组件分歧的是:这里要定义数组minusStatuses来与每二个加减按键相应。当然,合并入carts也是没难点的。

        minusStatuses: [‘disabled’, ‘disabled’, ‘normal’, ‘normal’,
‘disabled’]

原来的静态字符WXStepper换到以下的代码

 <view class="stepper">
        <!-- 减号 -->
        <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
        <!-- 数值 -->
        <input type="number" bindchange="bindManual" value="{{item.num}}" />
        <!-- 加号 -->
        <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
       </view>

js代码bindMinus、bindPlus分别改变为如下:

bindMinus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 如果只有1件了,就不允许再减了
    if (num > 1) {
      num --;
    }
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },
  bindPlus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 自增
    num ++;
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },

职能如图:

4858美高梅 2

[2016-10-17]

校订手工业改造数量保存到数组

1.3 集成LXCheckboxGroup

复制布局文件代码到wxml,这里必要看清一下已选状态,一般购物车勾选状态是记录在互连网的。

index值用于传值js,遍历之用。

      

 <!-- 复选框图标 -->
    <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
    <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

复选框居中

/*复选框样式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}

绑定点击复选框事件,对选用情状做反选操作。

  bindCheckbox: function(e) {
    /*绑定点击事件,将checkbox样式改变为选中与非选中*/
    //拿到下标值,以在carts作遍历指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon状态
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 对勾选状态取反
    carts[index].selected = !selected;
    // 写回经点击修改后的数组
    this.setData({
      carts: carts
    });
  }

效果图:

4858美高梅 3

1.4 加入全选与当时付钱开关

1.4.1 修改布局文件,完结上述按键尾部对齐,使用flex与定点中度来成功。

缩减为3行,看是还是不是还在最底;其余,还要确定保证悬浮在底部,不被列表项的滚动而滚动。

 <view class="carts-footer">
    <view bindtap="bindSelectAll">
      <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
      <icon wx:else type="circle" size="20" />
      <text>全选</text>
    </view>
    <view class="button">立即结算</view>
  </view>

微信小程序,实战篇购物车。事先用<button>立刻买单</button>来落实,开掘无论怎么样都无法促成全选部件与结算按键分散对齐,不响应如下样式

  display: flex;
  flex-direction: row;
  justify-content: space-between;

样式表

/*底部按钮*/
.carts-footer {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*复选框*/
.carts-footer icon {
  margin-left: 20rpx;
}

/*全选字样*/
.carts-footer text {
  font-size: 30rpx;
  margin-left: 8rpx;
  line-height: 10rpx;
}

/*立即结算按钮*/
.carts-footer .button {
  line-height: 80rpx;
  text-align: center;
  width:220rpx;
  height: 80rpx;
  background-color: #f60;
  color: white;
  font-size: 36rpx;
  border-radius: 0;
  border: 0;
}

1.4.2 全选与全不选事件

金玉锦绣bindSelectAll事件,退换全选状态

先是定义叁个data值,以记录全选状态

selectedAllStatus: false

事件达成:

 bindSelectAll: function() {
    // 环境中目前已选状态
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 购物车数据,关键是处理selected值
    var carts = this.data.carts;
    // 遍历
    for (var i = 0; i < carts.length; i++) {
      carts[i].selected = selectedAllStatus;
    }
    this.setData({
      selectedAllStatus: selectedAllStatus,
      carts: carts
    });
  }

4858美高梅 4

1.4.3
马上结账展现这两天所选的cid,以供提交到网络,商品数量应该是富含在cid中的,后端设计应当只关注cid与uid

布局文件也埋一下toast,js只要改造toast的显示与否就可以。

<toast hidden="{{toastHidden}}" bindchange="bindToastChange">
  {{toastStr}}
</toast>

为当下结账绑定事件bindCheckout,弹出cid弹窗

 bindCheckout: function() {
    // 初始化toastStr字符串
    var toastStr = 'cid:';
    // 遍历取出已勾选的cid
    for (var i = 0; i < this.data.carts.length; i++) {
      if (this.data.carts[i].selected) {
        toastStr += this.data.carts[i].cid;
        toastStr += ' ';
      }
    }
    //存回data
    this.setData({
      toastHidden: false,
      toastStr: toastStr
    });
  },
  bindToastChange: function() {
    this.setData({
      toastHidden: true
    });
  }

1.5 尾部悬浮固定

1.5.1 商品列表 .carts-list 加入 margin-bottom: 80rpx;
以及修改下边距为零,使得尾部部件与分隔不重复出现,padding: 0 40rpx;

1.5.2 尾部开关 .carts-footer 到场 background: white;

1.5.3 .carts-footer 加入

  position: fixed;
  bottom: 0;
  border-top: 1px solid #eee;

4858美高梅 5

1.6 汇总

1.6.1 首先定义多个数据源,并在布局文件中埋坑

total: ”

<text>{{total}}</text>

1.6.2 通用汇总函数

sum: function() {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 写回经点击修改后的数组
    this.setData({
      carts: carts,
      total: '¥' + total
    });
  }

下一场分别在bindMinus bindPlus bindCheckbox bindSelectAll
onLoad中调用this.sum()

如图:

4858美高梅 6

感激阅读,希望能扶助到大家,谢谢大家对本站的支撑!

购物车轻便实例,小程序购物车实例
微信小程序,这里达成购物车效用的小demo,有必要此功效的对象能够参照下。
摘要: 加减商…

微信小程序,这里实现购物车效用的小demo,有须要此功能的相恋的人能够参见下。

微信小程序实战篇之购物车的兑今世码示例,实战篇购物车

哈喽,大家好,快半个月没写了,未来提笔都有一点猛烈了,一直没更新的缘由,贰个是代码君也要上班,加上多年来做事相比忙,还会有正是写小说平素未被承认,所以没什么引力再撰写了,那时真的坚贞不屈不下去,筹划放任了,多谢读者曹明,四个南韩的大学生读者,支持小编,并给本身慰勉,期待本人更新下一篇,小编可怜感动,须臾间战役力恢复,其实你们容易的点赞,评论,都是给自家最大的支撑,好了,煽动和挑逗情绪实现,该讲前些天的要害了,购物车,购物车的分界面完结到不是很难,难题是管理内部的逻辑,无论是小程序,还是应用软件,购物车的逻辑都是最难的,上面开始教大家怎样兑现购物车了,先上效果图

4858美高梅 7

购物车完成

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>

布局不是很复杂,二个循环列表,循环出购物车货品,外加二个付钱的底层控件,还索要提示的是,循环列表外面要加一层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. 看清是或不是达到规定的标准任何勾选,假诺一切勾选,尾部的全选按键要点亮,判断凭仗是,价钱是不是等于总价,当然那只是一种判别方法,读者也得以透过勾选的数额决断,
  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的低价是能够有刷新的效应,即实时更新数据

二、修改对象数组

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

修改总体指标

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

修改部分数据

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

三、增多删减数据

1、增加数码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
  });
 }

3、清空数据

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

总结

前些天器重教学js是怎么样管理数量逻辑的,也讲授了数额的增加和删除改查,那是必须的知识项,回去要多多练习。好了昨天就讲到那,祝大家礼拜六欢腾~

以上正是本文的全部内容,希望对大家的就学抱有扶助,也期待我们多多扶助帮客之家。

哈喽,我们好,快半个月没写了,以后提笔都有一点刚烈了,一直没更新的原故,…

原链接:zhuanlan.zhihu.com/p/26942371

摘要: 加减商品数量,汇总价格,全选与全不选

本文转自林鑫的村办博客,有一对删改和批注。小编的笔触清楚,函数轻巧、语句简明,很适合初大方研习。

规划思路:

前言

一、从互连网上传播以下Json数据格式的数组 1.购物车id:cid 2.标题title
3.数目num 4.图片地址 5.标价price 6.小计 7.是还是不是选中selected

往常的购物车,基本都以因而大气的 DOM 操作来落到实处。微信小程序其实跟 vue.js
的用法极其像,接下去就看看小程序能够什么贯彻购物车效能。

二、点击复选框toggle操作 如曾经入选的,经点击形成未选中,反之而反之
点击依附index作为标志,而不用cid,方便遍历

需求

三、全选操作
第三遍点击即为全部中选,再度点击为全不选,全选按键自身也紧跟着toggle转换

先来弄通晓购物车的须求。

四、点击付账开关,将已入选的cid数组抽取,以供通过互连网提交到服务端,这里给个toast作为结果演示。

单选、全选和撤消,何况会趁机选中的货物计量出总价

五、利用stepper作加减运算,同样基于index作为标志,点完写回num值。

单个商品购进数码的扩大和压缩

六、布局,全选与买下账单开关尾巴部分对齐,购物车市肆自适应高度,类似于Android的weight。

删除商品。当购物车为空时,页面会变为空购物车的布局

步骤:

传说设计图,我们能够先达成静态页面。接下来,再看看贰个购物车需求怎样的数据。

开班数据渲染

先是是四个商品列表(carts),列表里的单品须要:商品图(image),商品名(title),单价(price),数量(num),是或不是选中(selected),商品id(id)

1.1 布局与样式表

然后左下角的全选,必要两个字段(selectAllStatus)表示是或不是全选了

下面是二个货品列表,下方是叁个全选按键与当时买下账单开关

右下角的总价(totalPrice)

货品列表左部为物品缩略图,右上为货色标题,右下为商品价位与数码,个中商品数量使用WXStepper来达成加减操作

谈到底索要明白购物车是否为空(hasList)

js:伊始化三个数据源,那往往是从网络获得的,相关接口可参见:

略知一二了特殊必要这几个数据,在页面早先化的时候大家先定义好这个。

Page({
  data:{
    carts: [
      {cid:1008,title:'Zippo打火机',image:'https://img12.360buyimg.com/n7/jfs/t2584/348/1423193442/572601/ae464607/573d5eb3N45589898.jpg',num:'1',price:'198.0',sum:'198.0',selected:true},
      {cid:1012,title:'iPhone7 Plus',image:'https://img13.360buyimg.com/n7/jfs/t3235/100/1618018440/139400/44fd706e/57d11c33N5cd57490.jpg',num:'1',price:'7188.0',sum:'7188.0',selected:true},
      {cid:1031,title:'得力订书机',image:'https://img10.360buyimg.com/n7/jfs/t2005/172/380624319/93846/b51b5345/5604bc5eN956aa615.jpg',num:'3',price:'15.0',sum:'45.0',selected:false},
      {cid:1054,title:'康师傅妙芙蛋糕',image:'https://img14.360buyimg.com/n7/jfs/t2614/323/914471624/300618/d60b89b6/572af106Nea021684.jpg',num:'2',price:'15.2',sum:'30.4',selected:false},
      {cid:1063,title:'英雄钢笔',image:'https://img10.360buyimg.com/n7/jfs/t1636/60/1264801432/53355/bb6a3fd1/55c180ddNbe50ad4a.jpg',num:'1',price:'122.0',sum:'122.0',selected:true},
    ]
  }
})

代码完结

布局文件

购物车列表数据大家一般是通过乞求服务器获得的数目,所以大家位于生命周期函数里给
carts
赋值。想到每一回进到购物车都要赢得购物车的新式气象,而onLoad和onReady只在早先化的时候实践二遍,所以自个儿供给把央求放在
onShow 函数里。

<view class="container carts-list">
  <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
    <view>
     <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>
    </view>
   <view class="carts-text">
    <text class="carts-title">{{item.title}}</text>
    <view class="carts-subtitle">
     <text class="carts-price">{{item.sum}}</text>
     <text>WXStepper</text>
    </view>
   </view>
  </view>
</view>

布局 wxml

样式表

注:这里的tap事件绑定能够换用catch,一般景色下暗许使用catch*便好,比方将bindtap换到catchtap。个别组件的奇怪事件无法动用catch。

/*外部容器*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

/*整体列表*/
.carts-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}

/*每行单元格*/
.carts-item {
  display: flex;
  flex-direction: row;
  height:150rpx;
  /*width属性解决标题文字太短而缩略图偏移*/
  width:100%;
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
}

/*左部图片*/
.carts-image {
  width:150rpx;
  height:150rpx;
}


/*右部描述*/
.carts-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*右上部分标题*/
.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
}

/*右下部分价格与数量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

/*价格*/
.carts-price {
  color: #f60;
}

4858美高梅,测算总价

4858美高梅 8

总价 = 选中的商品1的 价格多少 + 选中的商品2的 价格数量 + …

1.2 集成WXStepper

依照公式,能够获取。

1.2.1 复制组件内容

页面中的别的操作会招致总价格变化的都急需调用该措施。

[2016-10-16]

挑选事件

将stepper.wxss的剧情复制到cart.wxss中

点击时相中,再点击又形成没选中状态,其实便是改造 selected 字段。通过
data-index=”{{index}}” 把当前商品在列表数组中的下标传给事件。

将stepper.wxml的剧情复制到cart.wxml中

全选事件

与前面包车型地铁单一组件分裂的是:这里要定义数组minusStatuses来与每三个加减按键相应。当然,合併入carts也是没难点的。

全选就是基于全选状态 selectAllStatus 去更动各类商品的 selected

        minusStatuses: [‘disabled’, ‘disabled’, ‘normal’, ‘normal’,
‘disabled’]

增减数量

本来的静态字符WXStepper换到以下的代码

点击+号,num加1,点击-号,如果num > 1,则减1

 <view class="stepper">
        <!-- 减号 -->
        <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
        <!-- 数值 -->
        <input type="number" bindchange="bindManual" value="{{item.num}}" />
        <!-- 加号 -->
        <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
       </view>

去除商品

js代码bindMinus、bindPlus分别退换为如下:

点击删除按钮则从购物车列表中去除当前因素,删除之后假如购物车为空,改造购物车为空标记hasList为false

bindMinus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 如果只有1件了,就不允许再减了
    if (num > 1) {
      num --;
    }
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },
  bindPlus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 自增
    num ++;
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },

总结

作用如图:

虽说一个购物车成效比较简单,不过里面涉及到微信小程序的知识点依然非常多的,适合新手练习了然。

4858美高梅 9

总体的小程序商铺demo含购物车,请戳:wxapp-mall

[2016-10-17]

校订手工业退换数量保存到数组

3月27日特邀加入live:零编制程序营造一款私人智能援手

1.3 集成LXCheckboxGroup

新图书学习革命:有一人智能秘书陪伴学习,是一种何等感受?

复制布局文件代码到wxml,这里供给看清一下已选状态,一般购物车勾选状态是记录在互联网的。

live推荐:零基础星期日求学小程序开垦

index值用于传值js,遍历之用。

无所不至自己的微信公众号工学李论,回复“微信小程序”,查看全数剧情。

      

 <!-- 复选框图标 -->
    <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
    <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

复选框居中

/*复选框样式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}

绑定点击复选框事件,对采用情状做反选操作。

  bindCheckbox: function(e) {
    /*绑定点击事件,将checkbox样式改变为选中与非选中*/
    //拿到下标值,以在carts作遍历指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon状态
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 对勾选状态取反
    carts[index].selected = !selected;
    // 写回经点击修改后的数组
    this.setData({
      carts: carts
    });
  }

效果图:

4858美高梅 10

1.4 插手全选与当下结账开关

1.4.1 修改布局文件,达成上述按键尾巴部分对齐,使用flex与一定中度来形成。

调整和减弱为3行,看是还是不是还在最底;其它,还要保障悬浮在底层,不被列表项的轮转而滚动。

 <view class="carts-footer">
    <view bindtap="bindSelectAll">
      <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
      <icon wx:else type="circle" size="20" />
      <text>全选</text>
    </view>
    <view class="button">立即结算</view>
  </view>

从前用<button>立时付钱</button>来兑现,开掘无论怎样都不能够落到实处全选部件与付钱按键分散对齐,不响应如下样式

  display: flex;
  flex-direction: row;
  justify-content: space-between;

样式表

/*底部按钮*/
.carts-footer {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*复选框*/
.carts-footer icon {
  margin-left: 20rpx;
}

/*全选字样*/
.carts-footer text {
  font-size: 30rpx;
  margin-left: 8rpx;
  line-height: 10rpx;
}

/*立即结算按钮*/
.carts-footer .button {
  line-height: 80rpx;
  text-align: center;
  width:220rpx;
  height: 80rpx;
  background-color: #f60;
  color: white;
  font-size: 36rpx;
  border-radius: 0;
  border: 0;
}

1.4.2 全选与全不选事件

贯彻bindSelectAll事件,更换全选状态

第一定义三个data值,以记录全选状态

selectedAllStatus: false

事件完成:

 bindSelectAll: function() {
    // 环境中目前已选状态
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 购物车数据,关键是处理selected值
    var carts = this.data.carts;
    // 遍历
    for (var i = 0; i < carts.length; i++) {
      carts[i].selected = selectedAllStatus;
    }
    this.setData({
      selectedAllStatus: selectedAllStatus,
      carts: carts
    });
  }

4858美高梅 11

1.4.3
立刻买下账单呈现近期所选的cid,以供提交到互连网,商品数量应该是归纳在cid中的,后端设计应该只关怀cid与uid

布局文件也埋一下toast,js只要更换toast的来得与否就能够。

<toast hidden="{{toastHidden}}" bindchange="bindToastChange">
  {{toastStr}}
</toast>

为及时买下账单绑定事件bindCheckout,弹出cid弹窗

 bindCheckout: function() {
    // 初始化toastStr字符串
    var toastStr = 'cid:';
    // 遍历取出已勾选的cid
    for (var i = 0; i < this.data.carts.length; i++) {
      if (this.data.carts[i].selected) {
        toastStr += this.data.carts[i].cid;
        toastStr += ' ';
      }
    }
    //存回data
    this.setData({
      toastHidden: false,
      toastStr: toastStr
    });
  },
  bindToastChange: function() {
    this.setData({
      toastHidden: true
    });
  }

1.5 底部悬浮固定

1.5.1 商品列表 .carts-list 参预 margin-bottom: 80rpx;
以及修改下面距为零,使得尾巴部根据地件与分隔不另行出现,padding: 0 40rpx;

1.5.2 尾巴部分开关 .carts-footer 加入 background: white;

1.5.3 .carts-footer 加入

  position: fixed;
  bottom: 0;
  border-top: 1px solid #eee;

4858美高梅 12

1.6 汇总

1.6.1 首先定义贰个数据源,并在布局文件中埋坑

total: ”

<text>{{total}}</text>

1.6.2 通用汇总函数

sum: function() {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 写回经点击修改后的数组
    this.setData({
      carts: carts,
      total: '¥' + total
    });
  }

下一场分别在bindMinus bindPlus bindCheckbox bindSelectAll
onLoad中调用this.sum()

如图:

4858美高梅 13

多谢阅读,希望能支援到我们,感激我们对本站的扶助!

你只怕感兴趣的稿子:

  • 微信小程序之购物车功用
  • 微信小程序实战篇之购物车的兑当代码示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有