uniapp怎么实现左滑删除商品功能

1. 什么是uniapp？

uniapp是一款基于Vue.js框架的跨平台应用开发框架，可以用同一套代码，同时开发出可以在多个平台上运行的原生应用程序。

uniapp支持编译成微信小程序、支付宝小程序、H5、App以及其他平台，可以极大地提升开发效率。

2. 左滑删除商品功能实现思路

2.1 页面结构

我们可以首先定义一个商品列表页面，每个商品右边添加一个删除按钮，用户可以通过左滑的方式来显示删除按钮，并删除相应的商品。

<template>

  <div class="product-list">
    <div class="product-item" v-for="(product,index) in productList" :key="product.id">
      {{product.name}}
      <div class="delete-btn">删除</div>
    </div>
  </div>
</template>

2.2 左滑展示删除按钮

实现左滑展示删除按钮的方式比较多，可以通过原生js写自己的滑动组件，也可以引入第三方库完成此功能。接下来我们以引入第三方组件的方式来进行讲解。

我们将引入一个名为Mescroll-uni的组件库，该组件库包含了常见的下拉刷新、上拉加载、左滑删除等功能。

npm install --save mescroll-uni

在商品列表页面中，我们需要引入Mescroll-uni组件，并进行配置，例如进行下拉刷新操作和左滑删除操作。

<template>

  <mescroll-uni ref="mescrollRef" @down="downCallback">
    <div class="product-list">
      <div class="product-item" v-for="(product,index) in productList" :key="product.id">
        {{product.name}}
        <div class="delete-btn">删除</div>
      </div>
    </div>
  </mescroll-uni>
</template>

import MescrollUni from "@/uni_modules/mescroll-uni/mescroll-uni.vue";

export default {
  components: {
    MescrollUni
  },
  data() {
    return {
      productList: [], // 商品列表数据
      mescrollOption: {
        down: {
          callback: this.downCallback // 下拉刷新回调函数
        }
      }
    };
  },
  methods: {
    downCallback() {
      // 下拉刷新回调函数
    }
  }
};

在执行下拉刷新操作时，需要将商品列表数据重新渲染到页面上，可以通过接口来获取数据。下面我们来编写一个下拉刷新回调函数，其中当下拉刷新状态结束时，需要触发完成下拉刷新的操作。

downCallback() {

  // 请求商品列表数据
  Api.getProductList().then(
    res => {
      this.productList = res.data;
      this.$refs.mescrollRef.$mescroll.endSuccess();
    },
    err => {
      this.$refs.mescrollRef.$mescroll.endErr();
    }
  );
}

2.3 左滑删除操作

在左滑删除商品时，我们可以通过手势事件和动画效果来实现，下面具体来讲解。

首先，在Mescroll-uni组件中，我们可以通过配置left属性来进行左滑删除的操作。在商品列表中，我们需要将left属性设置为删除按钮的宽度，通过触发唤醒和关闭事件来展示/隐藏删除按钮。

<template>

  <mescroll-uni ref="mescrollRef" :left="80" @down="downCallback">
    <div class="product-list">
      <div class="product-item" v-for="(product,index) in productList" :key="product.id" @touchstart="touchstart(index)" @touchmove="touchmove(index)" @touchend="touchend(index)">
        {{product.name}}
        <div class="delete-btn" :class="{show: product.showDelete}" @click="deleteProduct(index)">删除</div>
      </div>
    </div>
  </mescroll-uni>
</template>

在上面的代码中，我们监听了商品列表的touchstart、touchmove、touchend事件，并绑定了三个方法。其中touchstart方法用于初始化滑动起始位置，touchmove方法用于控制滑动过程和展开/隐藏删除按钮，touchend方法用于判断最后滑动完成后，删除按钮是否需要展示。

touchstart(index) {

  this.startX = this.moveX = event.touches[0].clientX;
  this.startY = this.moveY = event.touches[0].clientY;
  this.touchIndex = index;
},
touchmove(index) {
  if (index != this.touchIndex) {
    return;
  }
  let deltaX = event.touches[0].clientX - this.moveX;
  let deltaY = event.touches[0].clientY - this.moveY;
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    event.preventDefault();
    let product = this.productList[index];
    if (deltaX > 0 && product.showDelete === true) {
      product.showDelete = false;
      return;
    }
    if (deltaX < 0) {
      product.showDelete = true;
    }
    this.moveX = event.touches[0].clientX;
  }
},
touchend(index) {
  if (index != this.touchIndex) {
    return;
  }
  let deltaX = event.changedTouches[0].clientX - this.startX;
  let deltaY = event.changedTouches[0].clientY - this.startY;
  if (Math.abs(deltaX) < 10 || Math.abs(deltaY) > 10) {
    return;
  }
  this.moveIndex = index;
  let product = this.productList[index];
  if (deltaX > 0 && product.showDelete === true) {
    product.showDelete = false;
    return;
  }
  if (deltaX < 0 && product.showDelete === false) {
    product.showDelete = true;
    // 关闭其它已经展开的按钮
    this.productList.forEach(
      (item, i) =>
        i !== index && item.showDelete === true && (item.showDelete = false)
    );
    return;
  }
  this.moveIndex = -1;
}

在上面的代码中，我们定义了全局变量startX、moveX、startY、moveY、touchIndex和moveIndex，分别用于记录左滑起始位置、滑动过程中的位置、垂直滑动的起始位置、滑动过程中的位置、触摸的商品索引和滑动的商品索引。

具体来说，当touchstart事件被触发时，我们记录了当前触摸的位置，并记录了触摸的商品索引。当touchmove事件被触发时，我们通过计算触摸点的位置来决定商品是否需要展开删除按钮，同时阻止了默认行为。当touchend事件被触发时，我们通过计算滑动的偏移量和方向来决定展开/隐藏删除按钮或删除商品，同时还需要确保滑动的距离小于10，并且滑动的方向与垂直方向的夹角小于10度。

deleteProduct(index) {

  let product = this.productList[index];
  // 发送请求删除商品
  Api.deleteProduct(product.id).then(
    res => {
      // 商品删除成功后，将其从列表中删除
      this.productList.splice(index, 1);
    },
    err => {
      // 商品删除失败
    }
  );
}

在删除商品的回调函数中，我们需要通过发送请求将商品从数据库中删除，并在删除成功后，将商品从页面上移除，添加删除动画效果。

3. 总结

本篇文章主要介绍了如何通过uniapp来实现左滑删除商品的功能。我们首先定义了商品列表页面的结构，然后引入了Mescroll-uni组件库，来完成下拉刷新和左滑删除的操作。具体来说，我们通过监听touch相关的事件来实现商品的左滑展示和删除操作，并配合触摸事件的坐标计算，添加了动画效果，提升了用户体验。

通过本文的讲解，相信大家可以更加深入地了解uniapp开发，掌握实现基本功能的技巧，为自己的应用开发之路打下坚实的基础。