微信小程序-购物车功能

作者：心之约会446 | 来源：互联网 | 2023-08-23 18:00

一个简单微信小程序购物车功能首先感谢王慧永分享的文章，我直接将其中滑动的事件代码直接copy过来的。http:blog.csdn.netu011072139articledetai

一个简单微信小程序购物车功能
首先感谢王慧永分享的文章，我直接将其中滑动的事件代码直接copy过来的。http://blog.csdn.net/u011072139/article/details/54692237

购物车展示

通过微信小程序方法
var datas = wx.getStorageSync("cars");
和wx.setStorageSync("cars", JSON.stringify(datas));
保存读取数据，
item界面使使用position: absolute;和z-index: 4;实现
下面就直接贴代码了
布局：

 <view class='container0'> <view wx:if='{{shoppingcars.length>0}}'> <view class='content_top'> <text class='content_top_txt_1'>购物车text> view> <view class='content_carts'> <block wx:for="{{shoppingcars}}" wx:for-index="idx" wx:for-item="item" wx:key="key"> <view class='shoppingcaritem'> <view class='itemContent' bindtap='changeStatus' bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index='{{idx}}' style="{{item.value.txtStyle}}"> <view class='car_icon'> <icon type='success' color='#d5242a' size='23' wx:if='{{item.value.isChecked}}'>icon> <icon type='circle' color='#d5242a' size='23' wx:else>icon> view> <view class='image'> <image src='{{item.value.images}}' mode='widthFix'>image> view> <view class='detailmess'> <view class='text0'> <text>{{item.value.name}}text> view> <view class='text2'> <view class='text2-'> <text class='text2-0'>单价￥text> <text class='text2-1'>{{item.value.price}}text> <text class='text2-2'>/{{item.value.unit}}text> view> view> <view class='add_sub_item'> <view class='add_sub'> <image src='../../images/image_sub.png' mode='aspectFit' catchtap='btnSub' data-index='{{idx}}' /> <view class='add_sub_txt'> <text>{{item.value.count}}text> view> <image src='../../images/image_add.png' mode='aspectFit' catchtap='btnAdd' data-index='{{idx}}' /> view> view> view> view> <view class='itemDel'> <view bindtap="delItem" class="delItem" data-index='{{idx}}'>删除view> view> view> block> view> view> view>

样式：

/* pages/sideslipDel/sideslipDel.wxss */

.container0 { height: 100%; overflow-x: hidden; font-family: PingFangSC-Light, helvetica, 'Heiti SC'; }

/* **************goodsitem ***************************/

.content_top { border-bottom: #e5e5e5 solid 10rpx; width: 98%; height: 60rpx; line-height: 60rpx; margin-right: auto; margin-left: auto; vertical-align: middle; font-size: 0.925rem; }


.content_top_txt_1 { float: right; }

.content_carts { position: relative; width: 100%; height: 100%; border-bottom: #e5e5e5 solid 10rpx; overflow: hidden; }

.shoppingcaritem { margin-left: auto; margin-right: auto; background: white; width: 100%; height: 190rpx; /* border-radius: 10rpx; */ text-align: center; border-bottom: #e5e5e5 solid 2rpx; position: relative; overflow: hidden; }

.itemContent { width: 100%; position: absolute; top: 0; background-color: #fff; z-index: 5; padding: 0 10rpx; transition: left 0.2s ease-in-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border:#7cba23 solid thin; }

.itemDel { position: absolute; background-color: #e64340; height: 190%; width: 180rpx; line-height: 190rpx; vertical-align: middle; text-align: center; z-index: 4; top: 0; right: 0; color: #fff; }

.car_icon { width: 10%; height: 180rpx; line-height: 180rpx; vertical-align: top; display: inline-block; }

.car_icon icon { margin-right: 20rpx; }

.shoppingcaritem .image { width: 170rpx; display: inline-block; height: 170rpx; margin-bottom: 10rpx; margin-top: 10rpx; padding-left: 5rpx; padding-right: 5rpx; }

.image image { width: 100%; display: inline-block; }

.detailmess { padding-left: 10rpx; width: 60%; height: 100%; float: right; vertical-align: top; }

.detailmess text { width: 100%; display: inline-block; text-align: left; font-size: 28rpx; color: #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.text0 text { width: 100%; display: inline-block; margin-top: 20rpx; font-size: 32rpx; color: #434342; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; text-align: left; font-weight: 550; }

.text2 { width: 100%; display: inline-block; }

.text2- { float: left; padding-top: 10rpx; vertical-align: middle; }

.text2 text { display: inline; font-size: 26rpx; color: #9d9d9d; text-align: left; }

.text2 .text2-0 { color: #434342; font-weight: 550; }

.text2  .text2-2 { color: #434342; font-weight: 550; }

.text2 .text2-1 { color: #d5242a; font-size: 30rpx; }

.text2  .text2-3 { margin-left: 10rpx; color: white; background-color: brown; font-size: 0.555rem; }



.add_sub_top { border: gray solid 0.2rpx; font-size: 0.725rem; color: #a5a5a5; float: left; padding-left: 10rpx; padding-right: 10rpx; max-width: 50%; overflow-x: hidden; }

.add_sub_top text { height: 50rpx; line-height: 50rpx; vertical-align: middle; }

.add_sub { width: 200rpx; height: 50rpx; line-height: 50rpx; vertical-align: middle; float: right; text-align: center; }

.add_sub_txt { height: 50rpx; line-height: 50rpx; vertical-align: top; display: inline-block; padding-left: 15rpx; padding-right: 15rpx; }

.add_sub_txt text { font-size: 1.0rem; }

.add_sub image { height: 40rpx; width: 40rpx; margin: 5rpx; display: inline-block; /* border: red solid thin; */ }

/* *******以上*******goodsitem ***************************/

代码逻辑部分


const util = require('../../utils/util.js');

Page({
  /** * 页面的初始数据 */
  data: {
    shoppingcars: [],//购物车数据集合
    delBtnWidth: 180,//删除按钮宽度
    isItemClikeAble: true
  },

// 购物车中的item是否被选中-改变状态
  changeStatus: function (event) {
    console.log(this.data.isItemClikeAble);
    if (this.data.isItemClikeAble) {
      var that = this;
      var idx = event.currentTarget.dataset.index;
      if (that.data.shoppingcars[idx].value.isChecked) {
        that.data.shoppingcars[idx].value.isChecked = false;
      }
      else {
        that.data.shoppingcars[idx].value.isChecked = true;
      }
      this.setData({
        shoppingcars: that.data.shoppingcars
      });


    }
  },

// 加入购物车
  btnAdd: function (event) {
    var idx = event.currentTarget.dataset.index;
    var shoppingcar = this.data.shoppingcars[idx];
    console.log("btnAdd");
    console.log(shoppingcar);
    util.saveCarData1(shoppingcar, shoppingcar.value.count + 1);

    try {
      wx.getStorageSync("cars");
      this.setData({
        shoppingcars: JSON.parse(wx.getStorageSync("cars")),
      });
    } catch (e) {
      this.setData({
        shoppingcars: [],
      });
    }

  },
  //移除购物车
  btnSub: function (event) {
    var idx = event.currentTarget.dataset.index;
    var shoppingcar = this.data.shoppingcars[idx];
    console.log("btnSub");
    console.log(shoppingcar);
    util.saveCarData1(shoppingcar, shoppingcar.value.count - 1);

    try {
      wx.getStorageSync("cars");
      this.setData({
        shoppingcars: JSON.parse(wx.getStorageSync("cars")),
      });

    } catch (e) {
      this.setData({
        shoppingcars: [],
      });
    }
  },

  /** * 生命周期函数--监听页面加载 */
  onLoad: function (options) {

  },

  /** * 生命周期函数--监听页面初次渲染完成 */
  onReady: function () {

  },

  /** * 生命周期函数--监听页面显示 * 在这里，如果本地数据为空，就加入两天数据，方便查看 */
  onShow: function () {
    let str = [{ "key": "41", "value": { "name": "小白兔", "id": 41, "isChecked": true, "images": "../../images/002.jpg", "price": 19.5, "unit": "斤", "count": 1 } }, { "key": "40", "value": { "name": "大白兔", "id": 40, "isChecked": true, "images": "../../images/003.jpg", "price": 31.5, "unit": "斤", "count": 1 } }];
    try {
      wx.getStorageSync("cars");
      this.setData({
        shoppingcars: JSON.parse(wx.getStorageSync("cars")),
      });

      if (this.data.shoppingcars.length == 0) {
        this.setData({
          shoppingcars: str,
        });
        wx.setStorageSync("cars", JSON.stringify(str));
      }
    } catch (e) {
      this.setData({
        shoppingcars: str,
      });
      wx.setStorageSync("cars", JSON.stringify(str));
    }
    // }
    initdata(this);
    console.log(this.data.shoppingcars);
  },

  /** * 生命周期函数--监听页面隐藏 */
  onHide: function () {

  },

  /** * 生命周期函数--监听页面卸载 */
  onUnload: function () {

  },

  /** * 页面相关事件处理函数--监听用户下拉动作 */
  onPullDownRefresh: function () {

  },

  /** * 页面上拉触底事件的处理函数 */
  onReachBottom: function () {

  },

  /** * 用户点击右上角分享 */
  onShareAppMessage: function () {

  },

  /** * bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" * 分别是按下》》移动》》抬起事件 */
  touchS: function (e) {
    console.log(e.touches[0].clientX);
    if (e.touches.length == 1) {
      this.setData({
        //设置触摸起始点水平方向位置 
        startX: e.touches[0].clientX
      });
    }
  },
  touchM: function (e) {
    var that = this
    initdata(that)
    if (e.touches.length == 1) {
      //手指移动时水平方向位置 
      var moveX = e.touches[0].clientX;
      //手指起始点位置与移动期间的差值 
      var disX = this.data.startX - moveX;
      console.log(disX);
      var delBtnWidth = this.data.delBtnWidth;
      var txtStyle = "";
      if (disX == 0 || disX <0) {//如果移动距离小于等于0，文本层位置不变 
        txtStyle = "left:0rpx";
      } else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离 
        txtStyle = "left:-" + disX + "rpx";
        if (disX >= delBtnWidth) {
          //控制手指移动距离最大值为删除按钮的宽度 
          txtStyle = "left:-" + delBtnWidth + "rpx";
        }
      }
      //获取手指触摸的是哪一项 
      var index = e.currentTarget.dataset.index;
      var list = this.data.shoppingcars;
      console.log("list", list[index]);
      list[index].value.txtStyle = txtStyle;
      //更新列表的状态 
      this.setData({
        shoppingcars: list
      });
    }
  },

  touchE: function (e) {
    if (e.changedTouches.length == 1) {
      //手指移动结束后水平位置 
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束，手指移动的距离 
      var disX = this.data.startX - endX;
      var delBtnWidth = this.data.delBtnWidth;
      //如果距离小于删除按钮的1/2，不显示删除按钮 
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
      //获取手指触摸的是哪一项 
      var index = e.currentTarget.dataset.index;
      var list = this.data.shoppingcars;

      if (list[index].value.txtStyle != undefined && list[index].value.txtStyle.indexOf("-") != -1) {
        this.setData({
          isItemClikeAble: false
        });
      } else {
        this.setData({
          isItemClikeAble: true
        });
      }

      console.log("index", index);
      console.log("list", list);
      list[index].value.txtStyle = txtStyle;
      //更新列表的状态 
      this.setData({
        shoppingcars: list
      });
    }
  },
  //获取元素自适应后的实际宽度 
  getEleWidth: function (w) {
    var real = 0;
    try {
      var res = wx.getSystemInfoSync().windowWidth;
      var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应 
      // console.log(scale); 
      real = Math.floor(res / scale);
      return real;
    } catch (e) {
      return false;
      // Do something when catch error 
    }
  },
  initEleWidth: function () {
    var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
    this.setData({
      delBtnWidth: delBtnWidth
    });
  },
  //点击删除按钮事件 
  delItem: function (e) {
    var that = this
    wx.showModal({
      title: '提示',
      content: '是否删除？',
      success: function (res) {
        if (res.confirm) {
          //获取列表中要删除项的下标 
          var index = e.currentTarget.dataset.index;
          var list = that.data.shoppingcars;
          //移除列表中下标为index的项 
          list.splice(index, 1);
          //更新本地存储的购物车数据
          console.log(index);
          console.log(list);
          wx.setStorageSync("cars", JSON.stringify(list));
          //更新列表的状态 
          that.setData({
            shoppingcars: list
          });
          // initdata(that);
        } else {
          initdata(that)
        }
      }
    })
  },

})

var initdata = function (that) {
  var list = that.data.shoppingcars
  for (var i = 0; i ""
  }
  that.setData({ shoppingcars: list })
}

* util.saveCarData1(）方法*

function saveCarData1(item, num) {
  if (num >= 0) {
    var key = item.key;
    var value = item.value;

    value.count = num;
    console.log(item);
    try {
      var datas = wx.getStorageSync("cars");
      console.log(datas);
      var jsOnData= JSON.parse(datas);
      // 获取json数组中key的值为item.key的json对象
      var temp = jsonData.filter((p) => { return p.key == key; }); if (num != 0) { if (temp.length == 1) { temp[0].value.count = num; } else { jsonData.push({ "key": key, "value": value }); } } else { if (temp.length == 1) { temp[0].value.count = num; var index = jsonData.indexOf(temp[0]); jsonData.splice(index, 1) } else { // jsonData.push({ "key": key, "value": value }); } } console.log(jsonData) wx.setStorageSync("cars", JSON.stringify(jsonData)); } catch (e) { if (num != 0) { var datas = [{ "key": key, "value": value }]; wx.setStorageSync("cars", JSON.stringify(datas)); } } } }

以上就是大致的全部代码了，有所不足的地方还请大家多多斧正！

推荐阅读

io
C++Builder实现获取USB优盘序列号的方法

本文介绍了使用C++Builder实现获取USB优盘序列号的方法，包括相关的代码和说明。通过该方法，可以获取指定盘符的USB优盘序列号，并将其存放在缓冲中。该方法可以在Windows系统中有效地获取USB优盘序列号，并且适用于C++Builder开发环境。 ... [详细]

蜡笔小新 2023-12-09 08:17:53
text
Android开发实现的计时器功能示例

本文分享了Android开发实现的计时器功能示例，包括效果图、布局和按钮的使用。通过使用Chronometer控件，可以实现计时器功能。该示例适用于Android平台，供开发者参考。 ... [详细]

蜡笔小新 2023-12-12 22:51:19
runtime
flowable工作流流程变量_信也科技工作流平台的技术实践

1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下：目前OA流程引擎无法满足企业特定业务流程需求，且移动端体 ... [详细]

蜡笔小新 2023-12-13 10:17:15
runtime
使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换

本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式，然后详细介绍了相关API，包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List，以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较，指出了JSON的优势和缺点。 ... [详细]

蜡笔小新 2023-12-11 16:20:50
random
七牛上传图片成功之后，图片裂了

图像因存在错误而无法显示 ... [详细]

蜡笔小新 2023-12-11 13:17:11
text
Spring源码解密之默认标签的解析方式分析

本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断，区分默认命名空间和自定义命名空间，并采用不同的解析方式。其中，bean标签的解析最为复杂和重要。 ... [详细]

蜡笔小新 2023-12-14 17:24:50
text
单击后为什么远程通知操作无效？ - Why remote notification action is doing nothing after clicking?

IhaveconfiguredanactionforaremotenotificationwhenitarrivestomyiOsapp.Iwanttwodiff ... [详细]

蜡笔小新 2023-12-14 15:57:44
filter
Java工具类库Hutool介绍及功能概述

本文介绍了Java工具类库Hutool，该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装，并提供了各种Util工具类。同时，还介绍了Hutool的组件，包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码，提高开发效率。 ... [详细]

蜡笔小新 2023-12-14 14:29:36
text
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
text
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
text
如何查询zone下的表的信息

本文介绍了如何通过TcaplusDB知识库查询zone下的表的信息。包括请求地址、GET请求参数说明、返回参数说明等内容。通过curl方法发起请求，并提供了请求示例。 ... [详细]

蜡笔小新 2023-12-12 08:26:32
email
无法使用fetch在服务器端读取/获取发布的数据

本文介绍了一个React Native新手在尝试将数据发布到服务器时遇到的问题，以及他的React Native代码和服务器端代码。他使用fetch方法将数据发送到服务器，但无法在服务器端读取/获取发布的数据。 ... [详细]

蜡笔小新 2023-12-11 11:26:28
rsa
SpringBoot整合SpringSecurity+JWT实现单点登录

SpringBoot整合SpringSecurity+JWT实现单点登录,Go语言社区,Golang程序员人脉社 ... [详细]

蜡笔小新 2023-12-11 08:21:41
email
Gitlab接入公司内部单点登录的安装和配置教程

本文介绍了如何将公司内部的Gitlab系统接入单点登录服务，并提供了安装和配置的详细教程。通过使用oauth2协议，将原有的各子系统的独立登录统一迁移至单点登录。文章包括Gitlab的安装环境、版本号、编辑配置文件的步骤，并解决了在迁移过程中可能遇到的问题。 ... [详细]

蜡笔小新 2023-12-10 14:38:53
text
国庆节到了，安利一个Android的自动动态授权插件

Android的老铁都知道申请权限时，除了要在AndroidManifest添加权限，还需要在activity中通过requestpermission对 ... [详细]

蜡笔小新 2023-10-17 06:57:20

心之约会446

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章