微信小程式-購物車功能

一個簡單微信小程式購物車功能

首先感謝王慧永分享的文章，我直接将其中滑動的事件代碼直接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;

實作

下面就直接貼代碼了

布局：

<!--pages/sideslipDel/sideslipDel.wxml-->
<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: %;
  overflow-x: hidden;
  font-family: PingFangSC-Light, helvetica, 'Heiti SC';
}

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

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


.content_top_txt_1 {
  float: right;
}

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

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

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

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

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

.car_icon icon {
  margin-right: rpx;
}

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

}

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

.add_sub_txt text {
  font-size: rem;
}

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

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


           

代碼邏輯部分

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

Page({
  /**
   * 頁面的初始資料
   */
  data: {
    shoppingcars: [],//購物車資料集合
    delBtnWidth: ,//删除按鈕寬度
    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 + );

    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 - );

    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": , "isChecked": true, "images": "../../images/002.jpg", "price": , "unit": "斤", "count":  } }, { "key": "40", "value": { "name": "大白兔", "id": , "isChecked": true, "images": "../../images/003.jpg", "price": , "unit": "斤", "count":  } }];
    try {
      wx.getStorageSync("cars");
      this.setData({
        shoppingcars: JSON.parse(wx.getStorageSync("cars")),
      });

      if (this.data.shoppingcars.length == ) {
        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[].clientX);
    if (e.touches.length == ) {
      this.setData({
        //設定觸摸起始點水準方向位置  
        startX: e.touches[].clientX
      });
    }
  },
  touchM: function (e) {
    var that = this
    initdata(that)
    if (e.touches.length == ) {
      //手指移動時水準方向位置  
      var moveX = e.touches[].clientX;
      //手指起始點位置與移動期間的內插補點  
      var disX = this.data.startX - moveX;
      console.log(disX);
      var delBtnWidth = this.data.delBtnWidth;
      var txtStyle = "";
      if (disX ==  || disX < ) {//如果移動距離小于等于0，文本層位置不變  
        txtStyle = "left:0rpx";
      } else if (disX > ) {//移動距離大于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 == ) {
      //手指移動結束後水準位置  
      var endX = e.changedTouches[].clientX;
      //觸摸開始與結束，手指移動的距離  
      var disX = this.data.startX - endX;
      var delBtnWidth = this.data.delBtnWidth;
      //如果距離小于删除按鈕的1/2，不顯示删除按鈕  
      var txtStyle = disX > delBtnWidth /  ? "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("-") != -) {
        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 = ;
    try {
      var res = wx.getSystemInfoSync().windowWidth;
      var scale = ( / ) / (w / );//以寬度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, );
          //更新本地存儲的購物車資料
          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 = ; i < list.length; i++) {
    list[i].value.txtStyle = ""
  }
  that.setData({ shoppingcars: list })
}
           

* util.saveCarData1(）方法*

function saveCarData1(item, num) {
  if (num >= ) {
    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 != ) {
        if (temp.length == ) {
          temp[0].value.count = num;
        } else {
          jsonData.push({ "key": key, "value": value });
        }
      } else {
        if (temp.length == ) {
          temp[0].value.count = num;
          var index = jsonData.indexOf(temp[]);
          jsonData.splice(index, )
        } else {
          // jsonData.push({ "key": key, "value": value });
        }
      }
      console.log(jsonData)
      wx.setStorageSync("cars", JSON.stringify(jsonData));
    } catch (e) {
      if (num != ) {
        var datas = [{ "key": key, "value": value }];
        wx.setStorageSync("cars", JSON.stringify(datas));
      }
    }

  }
}

           

以上就是大緻的全部代碼了，有所不足的地方還請大家多多斧正！