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

妖狐艹你老母 2021-08-27 12:39 441阅读 0赞

闲暇时间写一个小程序商城小项目的时候，遇到了左滑删除的功能，经过各种百度研究之后，实现了下图效果，现在分享一下我的实现过程：

## 效果图： ##

![在这里插入图片描述][20200331112850281.gif]

## 实现过程： ##

### 一、wxml布局 ###

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

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

### 二、wxss的写法 ###

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

.item {
      display: flex;
    }
    
    /* 除删除按钮之外的其他部分 */
    .item-left {
      /* 关键代码 start */
      width: 100%;
      margin-left: -140rpx;
      transform: translateX(140rpx);
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
      -webkit-transform: translateX(140rpx);
      /* 关键代码 end */
    }
    
    /* 删除按钮 */
    .delete {
      height: 100%;
      width: 140rpx;
      
      /* 关键代码 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:代码中有对应的注释）

data: {
        // 设置开始的位置
        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]
    // 拿到滑动的角度，判断是否大于 30°，若大于，则不滑动
        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
          }
    	
    	// 判断是否是当前滑动的块，然后对应修改 isTouchMove 的值，实现滑动效果
          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];
        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
        })
      }

### 直接上源码： ###

##### 1、wxml #####

<view class="cart">
    	<view class="content">
    		
    		<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>

##### 2、wxss #####

.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 */

##### 3、js #####

// 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
        })
      }
    })

##### PS：想要直接运行上方的效果图，欢迎去到github上面下载查看 #####

###### github地址：https://github.com/sunshime/Millet ######

欢迎start哟~

[20200331112850281.gif]: /images/20210813/faa718b8b67d4bea936603f081d26ab1.png