유니앱에서 왼쪽으로 스와이프하면 삭제버튼이 나타납니다

스마트폰의 대중화와 모바일 인터넷의 발전으로 다양한 애플리케이션 사용을 비롯한 다양한 작업에 휴대폰을 사용하는 사람들이 점점 더 많아지고 있습니다. 애플리케이션에서는 일반적으로 주소록, 메시지 목록, 주문 목록 등과 같은 일부 목록 데이터를 접하게 됩니다. 이러한 목록에는 세부 정보 보기, 읽음으로 표시, 삭제 등의 데이터 작업이 필요한 경우가 많습니다. 그 중에서 삭제 작업은 비교적 일반적인 작업입니다. 이 기사에서는 UniApp에서 왼쪽 스와이프로 삭제 버튼을 표시하는 방법에 중점을 둘 것입니다.

UniApp은 동일한 코드를 기반으로 동시에 여러 실행 플랫폼(iOS, Android, H5, 미니 프로그램, 빠른 애플리케이션 등 포함)용 애플리케이션을 생성할 수 있는 크로스 플랫폼 개발 프레임워크입니다. 이를 통해 개발자가 플랫폼마다 별도의 코드를 작성할 필요가 없어 개발 효율성이 크게 향상되고 개발 비용이 절감됩니다. 이 기사의 샘플 코드는 UniApp 개발 프레임워크의 Vue.js 부분을 기반으로 사용합니다.

1. 구현 아이디어

왼쪽으로 밀어서 삭제 버튼을 표시하는 효과를 얻으려면 목록 항목에 슬라이드 가능한 영역을 추가하는 것이 일반적입니다. 사용자가 해당 영역을 왼쪽으로 밀어 넣으면 삭제 버튼이 표시됩니다. . 동시에 여러 플랫폼을 지원하려면 모바일 장치에서의 터치 조작과 PC에서의 마우스 조작을 고려해야 합니다. 이를 바탕으로 다음과 같은 로직을 구현해야 합니다.

1. 슬라이딩 작업: 사용자 작업을 모니터링하고 사용자가 대상 영역 내에서 슬라이딩 작업을 수행했는지 확인합니다.
2. 작업 영역: 목록 항목에 슬라이딩 영역을 추가해야 합니다.
3. 삭제 버튼 표시: 사용자가 대상 영역 내에서 왼쪽으로 스와이프하면 삭제 버튼이 표시됩니다.
4. 삭제 버튼 숨기기: 사용자가 대상 영역 내에서 오른쪽으로 스와이프하면 삭제 버튼을 숨깁니다.
5. 삭제 버튼 클릭: 사용자가 삭제 버튼을 클릭하면 삭제 작업이 실행됩니다.

2. 구현 프로세스

1. 목록 페이지 및 목록 항목 구성요소 만들기

먼저 목록 페이지와 목록 항목 구성요소를 생성해야 합니다. 여기서는 uni에서 목록 구성요소와 목록 항목 구성요소를 사용합니다. -ui 프레임워크를 기본으로 사용하여 몇 가지 기본 스타일과 레이아웃을 구현합니다. 구체적인 코드는 다음과 같습니다.

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

여기에서는 목록 항목 구성 요소의 항목 콘텐츠에 슬라이딩 이벤트 리스너와 삭제 버튼을 추가하고 데이터에 활성 필드를 추가하여 삭제 버튼의 표시 및 숨기기를 제어합니다. . 스타일에서는 왼쪽 슬라이딩 효과를 얻기 위해 변환 속성을 사용하고, 삭제 버튼을 숨기기 위해 Overflow:hidden 속성을 사용합니다.

2. 슬라이딩 이벤트 듣기

슬라이딩 작업을 구현하려면 터치 이벤트를 모니터링해야 합니다. 코드에서는 단일 터치(터치 이벤트) 및 마우스 이벤트(mousedown, mousemove, mouseup 이벤트)를 사용하여 사용자 슬라이딩 작업을 모니터링합니다. 구체적인 구현 세부정보는 위 코드를 참조하세요.

3. 삭제 버튼 표시 및 숨기기 제어

사용자가 대상 영역에서 왼쪽으로 슬라이드하면 삭제 버튼을 표시해야 하고, 사용자가 대상 영역에서 오른쪽으로 슬라이드하면 삭제 버튼을 숨겨야 합니다. . 여기서는 활성 필드를 추가하여 삭제 버튼 제어를 구현합니다. 사용자가 왼쪽으로 스와이프하면 활성 필드가 true로 설정되고, 그렇지 않으면 false로 설정됩니다.

4. 삭제 버튼을 클릭하면 삭제 작업이 실행됩니다.

사용자가 삭제 버튼을 클릭하면 삭제 작업이 실행되어야 합니다. 여기서는 Vue.js 컴포넌트 인스턴스의 splice 메소드를 통해 데이터에서 현재 항목을 삭제합니다. 구체적인 구현은 샘플 코드의 onDeleteItem 메소드를 참조하세요.

3. 요약

지금까지 UniApp에서 왼쪽으로 스와이프하면 삭제 버튼으로 나타나는 효과를 완성했습니다. 슬라이딩 이벤트를 구현하고, 삭제 버튼의 표시 및 숨기기를 제어하고, 삭제 버튼을 클릭하여 삭제 작업을 실행함으로써 목록 데이터에 삭제 작업을 쉽게 추가할 수 있습니다.

실제 개발에서는 삭제 전 묻기, 다중 선택 삭제 지원 등 더 많은 요구 사항을 충족해야 할 수도 있다는 점에 주목할 필요가 있습니다. 이를 바탕으로 실제 요구 사항에 따라 더 많은 확장과 최적화를 수행하여 애플리케이션의 사용자 경험을 개선할 수 있습니다.

위 내용은 유니앱에서 왼쪽으로 스와이프하면 삭제버튼이 나타납니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!