1.项目目录 2.逻辑层 group.js // pages/group/group.js Page({ /** * 页面的初始数据 */ data: { goodslist: [ { id: "001", imgUrl: "http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg", name: "女装T恤中长款大码摆裙春夏新款", price:…

<!--pages/shop/shop.wxml--> <view wx:if="{{hasList}}"> <view class="container carts-list"> <view wx:key="isshop" wx:for="{{carts}}" class="carts-item" > <view class="carts-c…

// pages/shop/shop.js Page({ /** * 页面的初始数据 */ data: { carts: [ { teaname: '冠军乌龙茶-150g', image: '../../imgs/car/shopping_pic_1.png', num: '1', price: '1200.00', sum: '1200.0', selected: true, cid: 1001, }, { teaname: '18年老茶-150g', image: '../../imgs/c…

// 购物车删除 deleteList(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; carts.splice(index, 1); // 删除购物车列表里这个商品 this.setData({ carts: carts }); if (!carts.length) { // 如果购物车为空 this.setData({ hasList: false // 修改标识为false,显示购…

//1,wxss /*外部容器*/ .container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; }   /*整体列表*/ .carts-list { display: flex; flex-direction: column; }   /*每行单元格*/ .carts-item { display:…

转载来源于:https://segmentfault.com/a/1190000011710786 简化了一下,发出来吧 示例源码:点击下载…

微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题title 2.图片地址 3.数量num 4.价格price  5.是否选中selected 二.点击复选框toggle操作 如已经选中的,经点击变成未选中,反之而反之 点击依据index作为标识,方便遍历 三.全选操作 首次点击即为全部选中,再次点击为全不选,全选按钮本身也跟随toggle变换 四.点击结…

前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品.当购物车为空时,页面会变为空购物车的布局 原文作者:林鑫,作者博客:https://github.com/lin-xin/blog 根据设计图,我们可以先实现静态页面.接下来,再看看一个购物车需要什么样的数据. 首先是一个商品列…

微信小程序购物车产品计价: 问题:当选中商品,价格累加时会出现无限循环小数 解答:在计算前先parseFloat(变量),再计算的最后使用(变量).toFixed(2)保留两位小数 例如: jiaCart:function(e){    var pid = e.currentTarget.id;    var pic = parseFloat(e.currentTarget.dataset.pic);    var cartList=this.data.cartList;    var ex =…

对于网上商城,加入购物车是一个必备功能了.俺今天就来说下在微信小程序里如何造一个购物车弹层. 先上图: 主要用到的微信API:wx.createAnimation(OBJECT) 说下思路: 1.wxml文件里将页面布局好,我的布局如下图: 大概的框架代码如下: <view class='mask-layer' wx:if="{{showPop}}" bindtap='hideModal'></view> <view class='pop-add-cart…