微信小程序类似购物车列表效果，计算总共价格数量，加减商品计算，滑动删除

先看下效果图：

一个小demo，记录下。

html：

  
  
    

      

      
        
        
          
          
            
              
              
                
              
              
              
                {{item.title}}
                
                  {{item.sort}}
                  {{item.color}}
                  

                  
                    ¥ {{item.price}}
                    
                    
                      
                        
                      
                      
                      
                      
                        
                      
                    
                    
                    
                      
                        
                      
                    
                  


                
              

            
          

          
          删除
        
      

    
  
  
    
      
        共计{{add_car_num}}件商品
        ¥ {{price}}
      
    
    
      马上购买
    
  

css：

/* pages/mycollect/mycollect.wxss */

page {
  background: #f5f5f5;
  height: 100%;
}

.collect_list_box {
  padding-top: 20rpx;
}

.collect_bottom {
  width: 100%;
  height: 80rpx;
  background: #fff;
  line-height: 80rpx;
}

.recordList_box {
  box-sizing: border-box;
  /* background: #ffffff; */
}

.content_box {
  /* border-top: 1rpx solid #dcdcdc; */
    border-bottom: 1rpx solid #ececec;
  position: relative;
}

.ProductIco_box {
  width: 130rpx;
  height: 130rpx;
  border-radius: 5px;
  border: 1rpx solid #ececec;
  margin-right: 18rpx;
  float: left;
}

.ProductIco {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.view_ce {
  width: 100%;
  height: 130rpx;
  position: relative;
  padding-top: 20rpx;
  padding-bottom: 30rpx;
  /* background: red;  */
  border-bottom: 1rpx solid #ececec;
}

.content_box_center {
  width: 100%;
  padding: 0rpx 20rpx 30rpx 20rpx;
  padding-top: 20rpx;
  /* margin-bottom: 30rpx; */
  height: 182rpx;
  z-index: 2;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-bottom: 1rpx solid #ececec;
}

.view_content {
  float: left;
  width: 556rpx;
}

.view_title {
  display: inline-block;
  float: left;
  width: 556rpx;
  font-size: 28rpx;
  color: #393939;
}

.view_fl>text {
  font-size: 22rpx;
  color: #898989;
  margin-right: 18rpx;
}

.view_btn_box>text {
  font-size: 28rpx;
  color: #f55212;
}

.view_btn {
  width: 150rpx;
  height: 44rpx;
  border: 1px solid #cecece;
  border-radius: 5px;
  float: right;
  font-size: 22rpx;
  color: #898989;
  line-height: 44rpx;
  /* display: none; *//* margin-bottom: 5rpx; */
}

.view_text_center, .view_img_left, .view_img_right {
  float: left;
}

.view_img_left, .view_img_right {
  width: 44rpx;
  height: 44rpx;
}

.view_img_left {
  border-right: 1rpx solid #cecece;
}

.view_img_right {
  border-left: 1rpx solid #cecece;
}

.view_text_center {
  width: 58rpx;
  height: 44rpx;
  text-align: center;
  line-height: 44rpx;
  box-sizing: border-box;
  font-size: 22rpx;
  color: #898989;
}

.view_btn image {
  width: 100%;
  height: 100%;
}

.view_add {
  width: 44rpx;
  height: 44rpx;
  border: 1px solid #cecece;
  border-radius: 5px;
  float: right;
  font-size: 22rpx;
  color: #898989;
  line-height: 44rpx;
  /* margin-bottom: 5rpx; */
}

.view_img_add {
  width: 44rpx;
  height: 44rpx;
}

.view_add image {
  width: 100%;
  height: 100%;
}

.delete_btn {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 32rpx;
  background: #ff3b30;
  width: 134rpx;
  height: 100%;
  text-align: center;
  line-height: 175rpx;
  /* border-bottom: 1px solid #ff3b30; */
  color: #fff;
  z-index: 1;
}
.collect_one {
  font-size: 28rpx;
  color: #393939;
}
.collect_two {
  margin-left: 20rpx;
  font-szie:32rpx;
  color:  #393939;
  margin-right: 20rpx;
}
 .collect_right {
 margin: 0 auto;
} 
.buy_btn_box {
  width: 100%;
  height: auto;
  text-align: center;
  background: #fff;
}
.buy_btn {
  width: 710rpx;
  height: 88rpx;
  background: #1da1f2;
  margin: 0 auto;
  font-size: 30rpx;
  line-height: 88rpx;
  color: #fff;
  text-align: center;
   display: flex;
   border-radius:5px; 
}
.buy_btn:active {
  background: red;
}
.buy_btn>text {
   margin: 0 auto;
}
.collect_big_box {
  width: 100%;
  height: 100%;
   /* position: relative;  */
}
  .buy_btn_box {
  position: fixed;
  left: 0;
   bottom: 0; 
   padding-bottom: 24rpx; 
  z-index: 999;
 }   

js：

// pages/mycollect/mycollect.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr: '',//存储请求回来的数组
    ini: 0,
    uhide: '',
    add_car_num: 0,//控制是否初次进入界面
    delBtnWidth: 134,//删除按钮宽度单位（rpx）
    price:'0.00'//价钱
  },
  // 滚动到底部
  lower:function(){
    console.log("我到了底部")
  },
  //删除
  delete_btn:function(e){
    var that = this;
    var index = e.currentTarget.dataset.index;
    wx.showModal({
      // title: '提示',
      content: '删除后不能恢复，是否删除？',
      confirmColor:'#1da1f2',
      success: function (res) {
        if (res.confirm) {
          console.log(index)
          var list = that.data.arr;
          //移除列表中下标为index的项  
          list.splice(index, 1);
          //更新列表的状态  
          that.setData({
            arr: list
          });
          let carts = that.data.arr;
          // var _this = this;
          var sum = 0;
          for (var i = 0; i  0) {
            for (var i = 0; i  0) {
      for (var i = 0; i  0) {
      for (var i = 0; i  0) {
      for (var i = 0; i  0) {
      for (var i = 0; i  0) {//移动距离大于0，文本层left值等于手指移动距离
        txtStyle = "left:-" + disX + "rpx";
        if (disX >= delBtnWidth) {
          //控制手指移动距离最大值为删除按钮的宽度
          txtStyle = "left:-" + delBtnWidth + "rpx";
        }
      }
      //获取手指触摸的是哪一个item
      var index = e.currentTarget.dataset.index;
      var list = that.data.arr;
      //将拼接好的样式设置到当前item中
      list[index].txtStyle = txtStyle;
      //更新列表的状态
      this.setData({
        arr: list
      });
    }
  },
  touchE: function (e) {
    // console.log(e);
    var that = this
    if (e.changedTouches.length == 1) {
      //手指移动结束后触摸点位置的X坐标
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束，手指移动的距离
      var disX = that.data.startX - endX;
      var delBtnWidth = that.data.delBtnWidth;
      //如果距离小于删除按钮的1/2，不显示删除按钮
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
      //获取手指触摸的是哪一项
      var index = e.currentTarget.dataset.index;
      var list = that.data.arr;
      list[index].txtStyle = txtStyle;
      //更新列表的状态
      that.setData({
        arr: list
      });
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '我的收藏'
    })
    var This = this;
    //请求接口
    wx.request({
      url: 'http://192.168.1.222:8081/StaticPage/searchlist.json', //仅为示例，并非真实的接口地址
      method: 'GET',
      data: {},
      success: function (res) {
        console.log(res.data.links)
        This.setData({
          arr: res.data.links
        })
      },
      fail: function (err) {
        console.log(err)
      }
    })
  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})