Use uniapp to implement sliding delete function

Use uniapp to implement the sliding delete function

The sliding delete function is one of the common interaction methods in modern mobile applications. It allows users to use sliding gestures in lists or pages. Quickly delete unwanted content. In the uniapp framework, implementing the sliding delete function is very simple and can be applied to multiple platforms.

First, we need to create a uniapp project and display the list items that need to be deleted on the page. In the list item, we can add an area that triggers sliding deletion and implement the corresponding event.

HTML code example:

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="item" @touchstart="touchStart(index)" @touchmove="touchMove(index)" @touchend="touchEnd(index)">
      <view class="content">{{ item }}</view>
      <view class="delete" @click="deleteItem(index)">删除</view>
    </view>
  </view>
</template>

In the above code, we use the v-for directive to iterate through the list items and add an area that triggers sliding deletion for each list item. To the right of the sliding delete area, we've added a "Delete" button.

Next, we need to implement the sliding deletion logic in the corresponding vue instance.

JavaScript code example:

<script>
export default {
  data() {
    return {
      list: ['列表项1', '列表项2', '列表项3', '列表项4', '列表项5'],
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      deleteWidth: 100,
      deletingIndex: -1
    }
  },
  methods: {
    touchStart(index) {
      this.deletingIndex = -1;
      this.startX = event.changedTouches[0].pageX;
      this.startY = event.changedTouches[0].pageY;
    },
    touchMove(index) {
      this.endX = event.changedTouches[0].pageX;
      this.endY = event.changedTouches[0].pageY;
      let moveX = this.endX - this.startX;
      let moveY = this.endY - this.startY;
      if (Math.abs(moveX) > Math.abs(moveY) && moveX < 0 && Math.abs(moveX) >= this.deleteWidth) {
        this.deletingIndex = index;
      } else if (this.deletingIndex === index && Math.abs(moveX) < Math.abs(moveY)) {
        this.deletingIndex = -1;
      }
    },
    touchEnd(index) {
      if (this.deletingIndex === index) {
        this.deleteItem(index);
      }
      this.deletingIndex = -1;
      this.startX = 0;
      this.startY = 0;
      this.endX = 0;
      this.endY = 0;
    },
    deleteItem(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

In the above code, we bound three touch event functions touchStart, touchMove and touchEnd. In the touchStart event, we record the coordinate information when the sliding starts. In the touchMove event, we calculate the sliding distance and determine whether the sliding delete function is currently activated based on certain conditions. In the touchEnd event, perform the deletion operation or cancel the deletion based on the result of the sliding.

Finally, we need to add the corresponding styles to the page.

CSS code example:

<style>
.item {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
  padding-left: 20px;
  font-size: 28px;
}

.delete {
  width: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  font-size: 28px;
}
</style>

Through the above code, we implemented a basic sliding delete function and showed an example of deleting a list item in the uniapp project. In actual projects, we can further customize the style and interaction effects according to needs to make the sliding delete function more in line with user expectations.

Summary:
In the uniapp framework, it is very simple to implement the sliding delete function. You only need to add the corresponding events and styles to the page. Through touch event functions such as touchStart, touchMove and touchEnd, we can easily realize the interactive effect of sliding deletion and perform the deletion operation in the corresponding method. At the same time, through customization of CSS styles, we can make the sliding delete function more beautiful and practical.

The above is the detailed content of Use uniapp to implement sliding delete function. For more information, please follow other related articles on the PHP Chinese website!