Swipe left on uniapp and a delete button appears

With the popularity of smartphones and the development of mobile Internet, more and more people are beginning to use mobile phones for various operations, including using various applications. In applications, we usually encounter some list data, such as address books, message lists, order lists, etc. These lists often require operations on the data, such as viewing details, marking as read, deleting, etc. Among them, the deletion operation is a relatively common operation. This article will focus on how to achieve the effect of a left swipe to appear a delete button in UniApp.

UniApp is a cross-platform development framework that can simultaneously generate applications for multiple running platforms (including iOS, Android, H5, mini programs, quick applications, etc.) based on the same code. This eliminates the need for developers to write separate codes for each platform, greatly improving development efficiency and reducing development costs. The sample code in this article will use the Vue.js part of the UniApp development framework as the basis.

1. Implementation ideas

To achieve the effect of sliding left to display a delete button, the general approach is to add a slidable area to the list item. When the user slides the area to the left, it is displayed Delete button. In order to ensure support for multiple platforms at the same time, we need to consider touch operations on mobile devices and mouse operations on PC. Based on this, we need to implement the following logic:

1. Sliding operation: monitor user operations and determine whether the user has performed a sliding operation within the target area.
2. Operation area: A sliding area needs to be added to the list item.
3. Show delete button: When the user slides left in the target area, the delete button is displayed.
4. Hide delete button: When the user slides right in the target area, hide the delete button.
5. Click the delete button: When the user clicks the delete button, the delete operation is triggered.

2. Implementation process

1. Creating a list page and a list item component

First we need to create a list page and a list item component , here we use the list component and list-item component in the uni-ui framework as the basis to implement some basic styles and layouts. The specific code is as follows:

<!-- list.vue -->
<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>

Here we add a sliding event listener and a delete button to the item-content of the list item component, and control the display and hiding of the delete button by adding an active field to the data. In the style, we use the transform attribute to achieve the left sliding effect, and use the overflow:hidden attribute to hide the delete button.

2. Listen to sliding events

We need to monitor touch events to implement sliding operations. The code uses single touch (touch event) and mouse events (mousedown, mousemove, mouseup event) to monitor user sliding operations. For specific implementation details, please refer to the above code.

3. Control the display and hiding of the delete button

When the user slides left in the target area, we need to display the delete button; when the user slides right in the target area , we need to hide the delete button. Here we implement the control of the delete button by adding an active field. When the user swipes left, we set the active field to true, otherwise it sets it to false.

4. Click the delete button to trigger the delete operation

When the user clicks the delete button, we need to trigger the delete operation. Here we delete the current item from the data through the splice method of the Vue.js component instance. For specific implementation, please refer to the onDeleteItem method in the sample code.

3. Summary

So far, we have completed the effect of a left swipe to appear as a delete button in UniApp. By implementing sliding events, controlling the display and hiding of the delete button, and clicking the delete button to trigger the deletion operation, we can easily add deletion operations to the list data.

It is worth noting that in actual development, we may need to meet more requirements, such as asking before deleting operations, supporting multi-select deletion, etc. On this basis, we can make more expansions and optimizations based on actual needs to improve the user experience of the application.

The above is the detailed content of Swipe left on uniapp and a delete button appears. For more information, please follow other related articles on the PHP Chinese website!