uniapp开发如何实现左滑出现删除按钮

功能介绍：利用uniapp开发如何实现左滑出现删除按钮效果，具体实现代码如下：

<template>
  <view>
    <list>
      <list-item
        v-for="(item, index) in list"
        :key="index"
        :data-index="index"
        :class="item.active ? 'item-active' : ''" >
        <view
          class="item-content"
          @touchstart="onTouchStart(index, $event)"
          @touchmove="onTouchMove(index, $event)"
          @touchend="onTouchEnd(index, $event)"
          @mousedown="onMouseDown(index, $event)"
          @mousemove="onMouseMove(index, $event)"
          @mouseup="onMouseUp(index, $event)" >
          <view class="item-title">{{item.title}}</view>
          <view class="item-delete" v-show="item.active" @click="onDeleteItem(index)">删除</view>
        </view>
      </list-item>
    </list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '列表项1', active: false },
        { title: '列表项2', active: false },
        { title: '列表项3', active: false },
        { title: '列表项4', active: false },
        { title: '列表项5', active: false },
      ],

      // 记录当前操作列表项的索引、起始滑动位置、当前滑动位置等信息
      currentIndex: -1,
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
    };
  },

  methods: {
    onTouchStart(index, event) {
      this.handleTouchStart(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },

    onTouchMove(index, event) {
      this.handleTouchMove(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },

    onTouchEnd(index, event) {
      this.handleTouchEnd(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },

    onMouseDown(index, event) {
     this.handleTouchStart(index, event.pageX, event.pageY);
    },

    onMouseMove(index, event) {
      this.handleTouchMove(index, event.pageX, event.pageY);
    },

    onMouseUp(index, event) {

      this.handleTouchEnd(index, event.pageX, event.pageY);

    },

    handleTouchStart(index, x, y) {
      if (this.currentIndex !== -1) {
        return;
      }

      this.currentIndex = index;
      this.startX = x;
      this.startY = y;
    },

    handleTouchMove(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }

      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },

    handleTouchEnd(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }

      this.currentIndex = -1;
      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },

    onDeleteItem(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>
 
<style lang="scss">
.item-active .item-content {
  transform: translateX(-60px);
}

.item-content {
  position: relative;
  height: 60px;
  padding: 0 20px;
  line-height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  .item-delete {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 20px;
    line-height: 60px;
    background-color: #f00;
    color: #fff;
    font-size: 18px;
  }
}
</style>

uniapp开发微信小程序提示“启动组件按需注入未通过”解决方法

uniapp开发axios接口调用解决跨域问题（只需4步）

uniapp语法实现扫码枪自带条码读取代码

uniapp如何实现扫码枪自带条码读取功能（附vue.js具体代码）

uniapp打包后，打开app有忽略版本检查提示框解决方法

标签： uniapp开发, uniapp语法, 左滑删除按钮

上面是“uniapp开发如何实现左滑出现删除按钮”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4565.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！