uniapp을 사용하여 슬라이딩 삭제 기능 구현

uniapp을 사용하여 슬라이딩 삭제 기능 구현

슬라이딩 삭제 기능은 최신 모바일 애플리케이션에서 흔히 사용되는 상호 작용 방법 중 하나로, 사용자가 슬라이딩 동작을 통해 목록이나 페이지에서 원하지 않는 콘텐츠를 빠르게 삭제할 수 있습니다. uniapp 프레임워크에서는 슬라이딩 삭제 기능을 구현하는 것이 매우 간단하며 여러 플랫폼에 적용할 수 있습니다.

먼저 uniapp 프로젝트를 생성하고 삭제해야 할 목록 항목을 페이지에 표시해야 합니다. 목록 항목에는 슬라이딩 삭제를 트리거하는 영역을 추가하고 해당 이벤트를 구현할 수 있습니다.

HTML 코드 예:

<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>

위 코드에서는 v-for 지시어를 사용하여 목록 항목을 반복하고 각 목록 항목에 대해 슬라이딩 삭제를 트리거하는 영역을 추가했습니다. 슬라이딩 삭제 영역 오른쪽에 "삭제" 버튼을 추가했습니다.

다음으로 해당 vue 인스턴스에 슬라이딩 삭제 로직을 구현해야 합니다.

JavaScript 코드 예:

<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>

위 코드에서는 세 가지 터치 이벤트 함수 touchStart, touchMove 및 touchEnd를 바인딩했습니다. touchStart 이벤트에서는 슬라이딩이 시작될 때 좌표 정보를 기록합니다. touchMove 이벤트에서는 슬라이딩 거리를 계산하고 특정 조건에 따라 현재 슬라이딩 삭제 기능이 활성화되어 있는지 확인합니다. touchEnd 이벤트에서는 슬라이딩 결과에 따라 삭제 작업을 수행하거나 삭제를 취소합니다.

마지막으로 해당 스타일을 페이지에 추가해야 합니다.

CSS 코드 예시 :

<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>

위 코드를 통해 기본적인 슬라이딩 삭제 기능을 구현하고 유니앱 프로젝트에서 목록 항목을 삭제하는 예시를 보여주었습니다. 실제 프로젝트에서는 슬라이딩 삭제 기능을 사용자 기대에 더 부합하도록 만들기 위해 필요에 따라 스타일과 상호 작용 효과를 추가로 사용자 정의할 수 있습니다.

요약:
uniapp 프레임워크에서는 슬라이딩 삭제 기능을 구현하는 것이 매우 간단합니다. 해당 이벤트와 스타일을 페이지에 추가하기만 하면 됩니다. touchStart, touchMove, touchEnd 등의 터치 이벤트 기능을 통해 슬라이딩 삭제의 대화형 효과를 쉽게 구현하고 해당 메서드에서 삭제 작업을 수행할 수 있습니다. 동시에 CSS 스타일의 사용자 정의를 통해 슬라이딩 삭제 기능을 더욱 아름답고 실용적으로 만들 수 있습니다.

위 내용은 uniapp을 사용하여 슬라이딩 삭제 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!