> 웹 프론트엔드 > uni-app > uniapp에서 길게 누르기 삭제를 구현하는 방법

uniapp에서 길게 누르기 삭제를 구현하는 방법

coldplay.xixi
풀어 주다: 2023-01-13 00:44:22
원래의
7681명이 탐색했습니다.

Uniapp은 길게 누르기 삭제 방법을 구현합니다. 구성요소를 사용하여 삭제를 확인하면 코드는 [this.Loop = setTimeout(function() {uni.showModal({title: 'Delete',content: '이 항목을 삭제하시겠습니까?) message?'

uniapp에서 길게 누르기 삭제를 구현하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, thinkpad t480 컴퓨터

권장 (무료): uni-app 개발 튜토리얼

uniapp 길게 눌러 삭제하는 방법:

1, 코드 보기

<view class="imgShow" v-for="(item,index) in list" :key="index">
  <image :src="item.image_path" @touchstart.prevent="touchstart(index)" @touchend.prevent="touchend"></image>
</view>
로그인 후 복사

2, 스크립트 코드

touchstart(index) {
  let that = this;
  clearInterval(this.Loop); //再次清空定时器,防止重复注册定时器
    this.Loop = setTimeout(function() {
      uni.showModal({
        title: &#39;删除&#39;,
        content: &#39;请问要删除本条消息吗?&#39;,
        success:async function(res) {
          if (res.confirm) {
            var id = that.list[index].id
            let data = await that.$http.post(&#39;api/shop/shop_qualification_image/delete&#39;,{
            &#39;id&#39;:id,
          }).then(function(data){
            console.log(&#39;用户点击确定&#39;)
          }).catch(function(data){});
        } else if (res.cancel) {
          console.log(&#39;用户点击取消&#39;)
        }
      }
    });
  }.bind(this), 1000);
},
touchend() {
  clearInterval(this.Loop);
},
로그인 후 복사

관련 무료 학습 권장 사항: php 프로그래밍(동영상)

위 내용은 uniapp에서 길게 누르기 삭제를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿