uni-app 实现左滑删除两种数据结构（超详细附源码）

我们先来看第一种简单的二维数组

来张效果图

实现代码

<template>
  <view class="content unify-margin">
    <view v-if="list.length !== 0">
      <!-- 间隔 -->
      <uni-interval height="8px"></uni-interval>

      <view class="item unify-relative unify-padding unify-background-color unify-radius"
        v-for="(item,index) in list" :key="index" @touchstart="drawStart" :data-index="index"
        @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+ 'rpx'">
        <view class="item-nk unify-flex" @tap="tapCut(item)">
          <image class="image unify-block unify-radius" :src="item.image || errorImage" mode=""></image>
          <view class="right unify-relative unify-weight">
            <view class="title unify-font-size-line-astrict">{{item.name}}</view>
            <view class="right-data unify-flex unify-absolute">
              <view class="right-score">
                4.8分
                <text class="right-appraise">| 66人评价</text>
              </view>
              <view class="right-distance">1km</view>
            </view>
          </view>
        </view>

        <view class="remove" @tap="tapDel(index)">删除</view>
      </view>

      <!-- 间隔 -->
      <uni-interval height="30px"></uni-interval>

      <!-- 加载更多 -->
      <uni-loading-more :loadingType="loadingType" :contentText="contentText"></uni-loading-more>

      <!-- 间隔 -->
      <uni-interval height="30px"></uni-interval>
    </view>

    <!-- 没有数据 -->
    <uni-null desc="没有收藏哦! 赶紧去收藏吧~" v-else></uni-null>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        errorImage: this.$mAssetsPath.errorImage, // 图片加载失败填充
        list: [{
          image: '',
          name: '食悦阁中餐食补',
        }],
        delBtnWidth: 120, // 滑动距离
        contentText: {
          contentdown: "上拉显示更多",
          contentrefresh: "正在加载...",
          contentnomore: '只有这么多了'
        },
        pageNum: 1, // 页码
        pageSize: 10, // 每页显示数量
        loadingType: 2, // 加载动画
      }
    },
    methods: {
      // 切换函数处理事件
      tapCut(e) {
        for (var index in this.list) { // 滑动初始化
          this.$set(this.list[index], 'right', 0);
        }
      },

      // 删除函数处理事件
      tapDel(e) {
        uni.showModal({
          title: '提示',
          content: '确认删除该收藏？',
          confirmText: '确认',
          success: res => {
            if (res.confirm) {
              let list = this.list;
              list.forEach((item, index) => {
                if (e === index) {
                  list.splice(index, 1)
                }
              })
              this.list = list;
              this.$mHelper.toast('删除成功')
            }
          }
        })
      },

      //开始触摸滑动
      drawStart(e) {
        var touch = e.touches[0];
        this.startX = touch.clientX;
      },
      //触摸滑动
      drawMove(e) {
        for (var index in this.list) {
          this.$set(this.list[index], 'right', 0);
        }
        var touch = e.touches[0];
        var item = this.list[e.currentTarget.dataset.index];
        var disX = this.startX - touch.clientX;
        if (disX >= 20) {
          if (disX > this.delBtnWidth) {
            disX = this.delBtnWidth;
          }
          this.$set(this.list[e.currentTarget.dataset.index], 'right', disX);
        } else {
          this.$set(this.list[e.currentTarget.dataset.index], 'right', 0);
        }
      },
      //触摸滑动结束
      drawEnd(e) {
        var item = this.list[e.currentTarget.dataset.index];
        if (item.right >= this.delBtnWidth / 2) {
          this.$set(this.list[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
        } else {
          this.$set(this.list[e.currentTarget.dataset.index], 'right', 0);
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  $image: 110rpx;
  $text-size: 28rpx;

  .content {

    .item {
      height: 142rpx;
      margin-top: 9px;


      .item-nk {
        height: inherit;
        align-items: center;
        justify-content: space-between;
      }

      .image {
        width: $image;
        height: $image;
      }

      .right {
        width: 78%;
        height: $image;

        .title {
          font-size: $text-size;
        }

        .right-data {
          width: 100%;
          align-items: center;
          justify-content: space-between;
          bottom: 0;

          .right-score {
            font-size: $text-size;
            color: $uni-text-color-orange;

            .right-appraise {
              font-size: 24rpx;
              color: $uni-text-color-grey;
              margin-left: 10rpx;
              font-weight: 400;
            }
          }

          .right-distance {
            font-size: 24rpx;
            color: $uni-text-color-grey;
            font-weight: 400;
          }
        }
      }

      // 删除
      .remove {
        width: 108rpx;
        text-align: center;
        height: inherit;
        background-color: #FF0000;
        color: white;
        position: absolute;
        right: -154rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20rpx 0 0 20rpx;
        font-size: 24rpx;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
</style>      

第二种三维数组

来张效果图

<template>
  <view class="content unify-margin">
    <view v-if="list.length !== 0">
      <view class="outer-sphere" v-for="(item1,index1) in list" :key="index1">
        <!-- 时间 -->
        <view class="time">{{item1.time}}</view>

        <uni-interval height="5px"></uni-interval>

        <view class="item unify-relative unify-padding unify-background-color unify-radius"
          v-for="(item2,index2) in item1.array" :key="index2" @touchstart="drawStart" :data-index1="index1"
          :data-index2="index2" @touchmove="drawMove" @touchend="drawEnd"
          :style="'right:'+item2.right+ 'rpx'">
          <view class="item-nk unify-flex" @tap="tapCut(item2)">
            <image class="image unify-block unify-radius" :src="item2.image || errorImage" mode=""></image>
            <view class="right unify-relative unify-weight">
              <view class="title unify-font-size-line-astrict">{{item2.name}}</view>
              <view class="right-data unify-flex unify-absolute">
                <view class="right-score">
                  4.8分
                  <text class="right-appraise">| 66人评价</text>
                </view>
                <view class="right-distance">1km</view>
              </view>
            </view>
          </view>

          <view class="remove" @tap="tapDel(index2)">删除</view>
        </view>
      </view>

      <!-- 间隔 -->
      <uni-interval height="30px"></uni-interval>

      <!-- 加载更多 -->
      <uni-loading-more :loadingType="loadingType" :contentText="contentText"></uni-loading-more>

      <!-- 间隔 -->
      <uni-interval height="30px"></uni-interval>
    </view>

    <!-- 没有数据 -->
    <uni-null desc="没有收藏哦! 赶紧去收藏吧~" v-else></uni-null>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        errorImage: this.$mAssetsPath.errorImage, // 图片加载失败填充
        list: [{
          time: '12-15',
          array: [{
            image: '',
            name: '食悦阁中餐食补',
          }, {
            image: '',
            name: '食悦阁中餐食补',
          }, {
            image: '',
            name: '食悦阁中餐食补',
          }]
        }, {
          time: '12-15',
          array: [{
            image: '',
            name: '食悦阁中餐食补',
          }, {
            image: '',
            name: '食悦阁中餐食补',
          }, {
            image: '',
            name: '食悦阁中餐食补',
          }]
        }],
        delBtnWidth: 120, // 滑动距离
        contentText: {
          contentdown: "上拉显示更多",
          contentrefresh: "正在加载...",
          contentnomore: '只有这么多了'
        },
        pageNum: 1, // 页码
        pageSize: 10, // 每页显示数量
        loadingType: 2, // 加载动画
      }
    },
    methods: {
      // 切换函数处理事件
      tapCut(e) {
        let list = this.list;
        for (var index1 in list) { // 滑动初始化
          for (var index2 in list[index1].array) {
            this.$set(list[index1].array[index2], 'right', 0);
          }
        }
      },

      // 删除函数处理事件
      tapDel(e) {
        uni.showModal({
          title: '提示',
          content: '确认删除该收藏？',
          confirmText: '确认',
          success: res => {
            if (res.confirm) {
              let list = this.list;
              list.forEach((item1, index1) => {
                item1.array.forEach((item2, index2) => {
                  if (e === index2) {
                    item1.array.splice(index2, 1)
                  }
                })
                if (item1.array.length === 0) {
                  list.splice(index1, 1)
                }
              })
              this.list = list;
              this.$mHelper.toast('删除成功')
            }
          }
        })
      },

      //开始触摸滑动
      drawStart(e) {
        var touch = e.touches[0];
        this.startX = touch.clientX;
      },
      //触摸滑动
      drawMove(e) {
        for (var index1 in this.list) {
          for (var index2 in this.list[index1].array) {
            this.$set(this.list[index1].array[index2], 'right', 0);
          }
        }
        var touch = e.touches[0];
        var item = this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2];
        var disX = this.startX - touch.clientX;
        if (disX >= 20) {
          if (disX > this.delBtnWidth) {
            disX = this.delBtnWidth;
          }
          this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right',
            disX);
        } else {
          this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right', 0);
        }
      },
      //触摸滑动结束
      drawEnd(e) {
        var item = this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2];
        if (item.right >= this.delBtnWidth / 2) {
          this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right',
            this.delBtnWidth);
        } else {
          this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right', 0);
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  $image: 110rpx;
  $text-size: 28rpx;

  .content {

    .outer-sphere:first-child {
      margin-top: 17px;
    }

    .outer-sphere {
      margin-top: 26px;
    }

    .time {
      font-size: $text-size;
      color: $uni-text-color-grey;
    }

    .item {
      height: 142rpx;
      margin-top: 9px;


      .item-nk {
        height: inherit;
        align-items: center;
        justify-content: space-between;
      }

      .image {
        width: $image;
        height: $image;
      }

      .right {
        width: 78%;
        height: $image;

        .title {
          font-size: $text-size;
        }

        .right-data {
          width: 100%;
          align-items: center;
          justify-content: space-between;
          bottom: 0;

          .right-score {
            font-size: $text-size;
            color: $uni-text-color-orange;

            .right-appraise {
              font-size: 24rpx;
              color: $uni-text-color-grey;
              margin-left: 10rpx;
              font-weight: 400;
            }
          }

          .right-distance {
            font-size: 24rpx;
            color: $uni-text-color-grey;
            font-weight: 400;
          }
        }
      }

      // 删除
      .remove {
        width: 108rpx;
        text-align: center;
        height: inherit;
        background-color: #FF0000;
        color: white;
        position: absolute;
        right: -154rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20rpx 0 0 20rpx;
        font-size: 24rpx;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
</style>