微信小程序 - 实现左滑动删除功能

微信小程序 - 实现左滑动删除功能

效果图：

实现过程：

一、wxml布局

这里我是先用了一个大盒子包裹小盒子，然后小盒子里面进行左右布局（左边为内容部分，右边为删除按钮）的方式实现的

<view class="cart">
	<view class="content">
		<!-- 通过 isTouchMove 的值来对应移动位置-->
		<view class="item {{item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{{dataList}}" wx:key="item.id">
			<view class="item-left" data-index="{{index}}" bindtouchstart="touchStart" bindtouchmove="touchMove">
				<view class="icon-check">
					<image src="{{noCheck}}"></image>
				</view>
				<view class="imgs">
					<image src="{{item.img}}"></image>
				</view>
				<view class="context">
					<view class="title">{{item.title}}</view>
					<view class="bottoms">
						<view class="price">￥{{item.price}}</view>
						<view class="num">
							<view class="opare">-</view>
							<view class="opare nums">{{item.num}}</view>
							<view class="opare">+</view>
						</view>
					</view>
				</view>
			</view>
			<view class="delete" data-id="{{item.id}}" bindtap="delItem">删除</view>
		</view>
	</view>
	<view class="footer">

	</view>
</view>

二、wxss的写法

wxss是用了flex布局，然后让左边的内容部分的宽度占100%，左外边距为删除按钮的宽度，右边设置固定宽度，通过动画的方式将右边的删除按钮往右偏移删除按钮的宽度，使之看不到，最后通过 动态设置 .touch-move-active 实现滑动效果。

.cart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.item {
  margin-bottom: 15rpx;
  background-color: #fff;
  padding: 20rpx 10rpx;
  padding-right: 0;
  display: flex;
  box-sizing: border-box;
  height: 220rpx;
}

/* 除删除按钮之外的其他部分 */
.item-left {
  display: flex;
  justify-content: start;
  align-items: center;

  /* 关键代码 start */
  width: 100%;
  margin-left: -140rpx;
  transform: translateX(140rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(140rpx);
  /* 关键代码 end */
}

.item-left .icon-check {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-check image {
  width: 45rpx;
  height: 45rpx;
  display: block;
}

.imgs {
  width: 200rpx;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgs image {
  width: 200rpx;
  height: 200rpx;
  display: block;
}

.context {
  padding-left: 20rpx;
}

.context .title {
  color: #333;
  font-size: 34rpx;
}

.context .bottoms {
  display: flex;
  padding-top: 20rpx;
}

.bottoms .price {
  width: 36rpx;
  color: #FD5761;
  padding-right: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottoms .num {
  display: flex;
  justify-content: start;
  align-items: center;
}

.bottoms .num .opare {
  padding: 10rpx 24rpx;
  border: 1rpx solid #ccc;
}

.num .nums {
  margin: 0 10rpx;
}

/* 删除按钮 */
.delete {
  height: 100%;
  width: 140rpx;
  background-color: rgb(241, 81, 81);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  color: #fff;
  /* 关键代码 start */
  transform: translateX(150rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(150rpx);
  /* 关键代码 end */
}

/* 关键代码 start --> 向左滑动 */
.touch-move-active .item-left,
.touch-move-active .delete {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
/* 关键代码 end */

三、js的写法

通过小程序自带的touchStart和touchMove实现的，我就不一一解释了，直接上代码（ps:代码中有对应的注释）

// pages/cart/cart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList: [{
        id: 1,
        img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50649d7b5706f4cd9f658e93db6b6564.jpg?thumb=1&w=200&h=200&f=webp&q=90",
        title: "小米真无线蓝牙耳机 Air 2",
        price: 278,
        num: 1,
        isTouchMove: false, //默认隐藏删除
        checked: false
      },
      {
        id: 2,
        img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/321610e787393c42e5cb2e5730a7681d.jpg?thumb=1&w=200&h=200",
        title: "小米小爱蓝牙音箱 随身版",
        price: 49,
        num: 1,
        isTouchMove: false, //默认隐藏删除
        checked: false
      },
      {
        id: 3,
        img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f32af53d1ad60f4980146f6a2b81019.jpg?thumb=1&w=200&h=200&f=webp&q=90",
        title: "小米无线充电宝青春版10000mAh",
        price: 129,
        num: 1,
        isTouchMove: false, //默认隐藏删除
        checked: false
      },
      {
        id: 4,
        img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c149537ebb0c2cdb977ddd93200074f4.jpg?thumb=1&w=200&h=200&f=webp&q=90",
        title: "小米旅行箱 20英寸 布朗熊限量版",
        price: 149,
        num: 1,
        isTouchMove: false, //默认隐藏删除
        checked: false
      }
    ],

    // 设置开始的位置
    startX: 0,
    startY: 0,
  },

  // 开始滑动
  touchStart(e) {
    console.log('touchStart=====>', e);
    let dataList = [...this.data.dataList]
    dataList.forEach(item => {
      if (item.isTouchMove) {
        item.isTouchMove = !item.isTouchMove;
      }
    });
    this.setData({
      dataList: dataList,
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    })
  },

  touchMove(e) {
    console.log('touchMove=====>', e);
    let moveX = e.changedTouches[0].clientX;
    let moveY = e.changedTouches[0].clientY;
    let indexs = e.currentTarget.dataset.index;
    let dataList = [...this.data.dataList]

    let angle = this.angle({
      X: this.data.startX,
      Y: this.data.startY
    }, {
      X: moveX,
      Y: moveY
    });

    dataList.forEach((item, index) => {
      item.isTouchMove = false;
      // 如果滑动的角度大于30° 则直接return；
      if (angle > 30) {
        return
      }

      if (indexs === index) {
        if (moveX > this.data.startX) { // 右滑
          item.isTouchMove = false;
        } else { // 左滑
          item.isTouchMove = true;
        }
      }
    })

    this.setData({
      dataList
    })
  },

  /**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },

  // 删除
  delItem(e) {
    let id = e.currentTarget.dataset.id;
    let dataList = [...this.data.dataList];
    console.log('id--->', id);


    for (let i = 0; i < dataList.length; i++) {
      const item = dataList[i];
      item.isTouchMove = false;
      if (item.id === id) {
        dataList.splice(i, 1);
        break;
      }
    }

    this.setData({
      dataList
    })
  }
})