微信小程序 数据滑动删除效果、左滑出删除按钮效果

微信小程序 数据滑动删除效果、左滑出删除按钮效果

实现效果：

代码：

html:

<view class="container">
  <view class="tuijianlp">
    <view class="lpli {{isTouchMove == index ? 'touch-move-active' : ''}}" bindtap="lpinfo" 
      bindtouchstart="touchstart" bindtouchmove="touchmove"
      wx:for="{{tuijlpList}}"
      wx:key="l_id"
      data-index="{{index}}"
      data-lid="{{item.l_id}}"
      data-areaid="{{item.area_id}}" >
      <view class="content">
        <view class="lef">
          <image src="{{item.img_path != '' ? item.img_path : '../../images/nopic.gif'}}" mode="" alt="" class="lpimg" />
        view>
        <view class="rig">
          <view class="lpname">{{ item.title }}view>
          <view class="price">{{ item.price }}元/m²view>
          <view class="hui place">{{ item.name }}view>
          <view class="tag">
            <text class="lpspan red">{{ item.sales_status }}text>
            <text class="lpspan tagico"
                  wx:for="{{item.category_like_val}}"
                  wx:for-item="t"
                  wx:key="key"
            >{{ t.title }}text>
          view>
        view>
      view>
      <view class="del" catchtap="del" data-bid="{{item.b_id}}">删除view>
    view>
  view>
view>

js:

import {
  getCollection,
  delcollection
} from "../../utils/requst/api.js";

Page({
  /**
   * 页面的初始数据
   */
  data: {
    token: "",
    tuijlpList: [],
    startX: 0, //开始坐标
    startY: 0,
    isTouchMove: null,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      token: getApp().globalData.token
    })
    this.getCollectionData();
  },

  lpinfo: function (e) {
    let lid = e.currentTarget.dataset.lid;
    let areaid = e.currentTarget.dataset.areaid;
    // console.log(lid, areaid);
    wx.navigateTo({
      url: "../newhouseinfo/newhouseinfo?lid=" + lid + '&areaid=' + areaid
    })
  },

  getCollectionData: function () {
    let params = {
      token: this.data.token,
      type: 2
    }
    getCollection(params).then((res) => {
      // console.log(params);
      console.log(res);
      this.setData({
        tuijlpList: res.data.data
      })
    })
  },
  //删除事件
  del: function (e) {
    let bid = e.currentTarget.dataset.bid;
    let paramsdel = {
      token: this.data.token,
      b_id: bid
    }
    // console.log(paramsdel);
    wx.showModal({
      title: "确定要删除吗？",
      success: (res) => {
        if (res.confirm) {
          delcollection(paramsdel).then((res) => {
            // console.log(res);
            if (res.data.message == "ok") {
              this.getCollectionData();
              wx.showToast({
                title: '已删除',
                icon: "none",
                duration: 2000
              })
            }
          })
        } else if (res.cancel) {
          this.setData({
            isTouchMove: null
          })
        }
      }
    })
  },

  //手指触摸动作开始 记录起点X坐标
  touchstart: function (e) {
    //开始触摸时 重置所有删除
    this.setData({
      isTouchMove: null,
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
    })
  },
  //滑动事件处理
  touchmove: function (e) {
    let index = e.currentTarget.dataset.index, //当前索引
      startX = this.data.startX, //开始X坐标
      startY = this.data.startY, //开始Y坐标
      touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
      //获取滑动角度
      angle = this.angle({
        X: startX,
        Y: startY
      }, {
        X: touchMoveX,
        Y: touchMoveY
      });
    this.setData({
      isTouchMove: null
    })
    // console.log(e);
    this.data.tuijlpList.map((v, i) => {
      // console.log(v, i);
      //滑动超过30度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) { //右滑
          this.setData({
            isTouchMove: null
          })
        } else { //左滑
          this.setData({
            isTouchMove: i
          })
        }
      }
    })
  },
  /**
  * 计算滑动角度
  * @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);
  },

})

css:(less)

@red: #ff2b0a;
@blue: #1fa2ff;
.container {
  position: relative;
  padding: 0 30rpx;
  margin-top: 10rpx;
}
.tuijianlp {
  position: relative;
  width: 100%;
  .lpli {
    width: 100%;
    padding: 20rpx 0;
    border-bottom: 1px solid #f8f8f8;
    display: flex;
    justify-content: space-between;
    overflow: hidden;

      .lef {
        width: 240rpx;
        height: 160rpx;
        .lpimg {
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
      }
      .rig {
        width: 420rpx;
        .lpname {
          font-size: 32rpx;
          color: #000;
          line-height: 46rpx;
        }
        .hui {
          color: #999;
          line-height: 46rpx;
        }
        .price {
          font-size: 34rpx;
          line-height: 46rpx;
          color: @red;
        }
        .place {
          font-size: 24rpx;
        }
        .tag {
          width: 100%;
          overflow: hidden;
          height: 30rpx;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .lpspan {            
            display: block;
            font-size: 20rpx;
            color: #333;
            height: 30rpx;
            line-height: 30rpx;
            padding: 0 10rpx;
            margin-right: 16rpx;
          }
          .red {
            color: #fff;
            background: @blue;
          }
          .tagico {
            background: #ededed;
          }
        }
      }
  }

  .lpli:nth-last-child(1){
    border-bottom:0;
  }
}

.content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-right: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  margin-left: -90px;   
}

.del {
  background-color: orangered;
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.touch-move-active .content,
.touch-move-active .del {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

借鉴文章：

【微信小程序】滑动删除效果最全Demo：https://blog.csdn.net/mi_ni123/article/details/80021048

微信小程序开发详解—小知识，大功能【实现按钮的随着手指移动】：https://blog.csdn.net/qq_26585943/article/details/79301000