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

逃离我推掉我的手 2023-01-22 13:55 10阅读 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  
    \})  
  \},

// 删除  
  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  
    \})  
  \}  
\})  
  
github地址：https://github.com/sunshime/Millet  
欢迎start哟~

[20200331112850281.gif]: /images/20221020/c22ce8e2e4d14f18bd79a67044c30829.png