애플 릿 이 왼쪽 미끄럼 삭제 효 과 를 실현 하 는 인 스 턴 스 코드

선언:애플 릿 슬라이딩 삭 제 를 실현 하 는 데 는 몇 가지 방법 이 있 는데,글 은 두 가지 실현 을 간단하게 열거 하고,먼저 효 과 를 본다.

1.movable-view 를 사용 하여 미끄럼 을 실현 합 니 다.
공식 문서 먼저 보기
movable-area 라벨 의 기본 개념 을 간단하게 해석 해 보 세 요.movable-area 탭 은 이동 가능 한 보기 용 기 를 정의 합 니 다.페이지 에서 드래그 하여 미 끄 러 지 는 것 을 지원 합 니 다.일반적인 view 용기 와 같 지만 다른 점도 있 습 니 다.movable-area 은 width 와 height 속성 을 설정 해 야 합 니 다.기본 값 은 10px 로 설정 하지 않 습 니 다.movable-view 기본 값 은 절대 위치 이 고 top 과 left 속성 은 0px 입 니 다.

 <movable-area>
  <movable-view out-of-bounds="true" direction="horizontal" inertia="true">
  </movable-view>
  </movable-area>

우리 가 사용 해 야 할 일부 속성 out-of-bounds 은 그 에 게 true 을 정의 하여 우리 의 용기 가 이동 가능 한 구역 을 초과 한 후에 movable-view 는 이동 할 수 있 습 니 다.direction 속성 은 우리 가 미 끄 러 지 는 방향 을 정의 하 는 것 입 니 다.vertical 은 수직 으로 미 끄 러 지 는 것 이 고 horizontal 은 수평 으로 미 끄 러 지 는 것 입 니 다.
2.Touch 이벤트 로 미끄럼 실현
1.bindtouchstart 함수,손가락 터치 동작 시작
2.bindtouchmove 함수,손가락 터치 후 이동
3.bindtouchend 함수,손가락 터치 동작 종료
실현 방향:
1.페이지 에 있 는 용 기 는 상하 2 층 으로 나 뉘 어 있 으 며,위 1 층 은 정상적으로 동작 하지 않 은 내용 을 불 러 오고,아래 1 층 은 용기 가 이 벤트 를 촉발 한 후 보 여 주 는 내용 을 보 여 줍 니 다.예 를 들 어 삭제,위,읽 지 않 은 버튼 으로 표시 합 니 다.
2.모든 용기 위 에 있 는 용 기 는 css 를 통 해 포 지 셔 닝 을 사용 하여 고정 시 키 고 이 벤트 를 조작 하여 이동 해 야 할 방향 으로 이동 합 니 다.
3.공식 문서 에서 제공 하 는 API 를 통 해 용기 가 방향 에 따라 이동 하 는 것 을 실현 한다.
전체 코드 는 다음 과 같다.
1.wxml

<view class="">
 <view class="containerTitle">  movable-view    </view>
 <view class="list">
 <view class="product-item" wx:for="{{productList}}" wx:for-index="index" wx:key="{{item.id}}" >
  <movable-area>
  <movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}"
   inertia="true"
   data-productIndex="{{index}}"
   bindtouchstart="handleTouchStart"
   bindtouchend="handleTouchEnd"
   bindchange="handleMovableChange">
   <view class="product-item-wrap">
   <view class="product-movable-item">
    <view class="product-movable-item-name">{{item.name}}</view>
    <view class="product-movable-item-code">{{item.code}}</view>
   </view>
   <view class="product-movable-item product-movable-item-amount">
    <text class="amount">{{item.amount}}</text>
    <text class="unit"> </text>
   </view>
   </view>
  </movable-view>
  </movable-area>
  <view class="delete-btn" data-id="{{item.id}}" bindtap="handleDeleteProduct">  </view>
 </view>
 </view>
 <view class="containerTitle">  Touch      </view>
 <view class="list">
 <view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key="{{item.id}}">
  <slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key="{{item.id}}">
  <view class="product-item-wrap">
   <view class="product-movable-item">
   <view class="product-movable-item-name">{{item.name}}</view>
   <view class="product-movable-item-code">{{item.code}}</view>
   </view>
   <view class="product-movable-item product-movable-item-amount">
   <text class="amount">{{item.amount}}</text>
   <text class="unit"> </text>
   </view>
  </view>
  </slide-delete>
 </view>
 </view>
</view>

 
2.wxss

.containerTitle {
 margin: 60rpx 0 30rpx;
 font-size: 40rpx;
 text-align: center;
 font-weight: bold;
 color: #383A3D;
}

.list .product-item {
 position: relative;
 width: 100vw;
 border-bottom: 2rpx solid #E9E9E9;
 box-sizing: border-box;
 background: #fff;
 z-index: 999;
}

.slide-product-list .slide-product-item {
 position: relative;
 width: 100vw;
 border-bottom: 2rpx solid #E9E9E9;
 box-sizing: border-box;
 background: #fff;
 z-index: 999;
}

.list .product-item movable-area {
 height: 120rpx;
 width: calc(100vw - 120rpx);
}

.list .product-item movable-view {
 height: 120rpx;
 width: 100vw;
 background: #fff;
 z-index: 999;
}

.list .product-item .delete-btn {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0; 
 width: 120rpx;
 font-family: PingFangSC-Regular;
 font-size: 24rpx;
 color: #FFFFFF;
 line-height: 120rpx;
 z-index: 1;
 background: red;
 text-align: center;
}

.list .product-item-wrap {
 position: relative;
 display: flex;
 align-items: center;
 padding: 8rpx 0 20rpx 20rpx;
 box-sizing: border-box;
}

.list .product-item-wrap .product-movable-item {
 flex: 1;
 overflow: hidden;
}

.list .product-item-wrap .product-movable-item-name {
 font-family: PingFangSC-Regular;
 font-size: 28rpx;
 color: #71747A;
 line-height: 60rpx;
 margin-right: 10rpx;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.list .product-item-wrap .product-movable-item-code {
 font-family: PingFangSC-Regular;
 font-size: 24rpx;
 color: #969AA3;
}

.list .product-item-wrap .product-movable-item-amount {
 flex: 0 0 auto;
 padding-right: 80rpx;
 position: relative;
}

.list .product-item-wrap .product-movable-item-amount .amount {
 width: 120rpx;
 font-size: 28rpx;
 color: #383A3D;
 line-height: 60rpx;
}

.list .product-item-wrap .product-movable-item-amount .unit {
 position: absolute;
 top: 0;
 right: 30rpx;
 font-size: 28rpx;
 color: #969AA3;
 line-height: 60rpx;
}

 
3.js 코드

//      
const app = getApp()

Page({
 data: {
 productList: [
  {
  id: 1,
  name: '31         13 ',
  code: 'Jin   ',
  amount: 5
  },
  {
  id: 2,
  name: '         ',
  code: 'bai   ',
  amount: 4
  },
  {
  id: 3,
  name: '          ',
  code: '  ',
  amount: 10
  }
 ],
 slideProductList: [
  {
  id: 4,
  name: '               ',
  code: 'xin  ',
  amount: 101
  },
  {
  id: 5,
  name: '            ',
  code: 'zz  ',
  amount: 500
  },
  {
  id: 6,
  name: '       ',
  code: 'xx  ',
  amount: 110
  }
 ]
 },

 onLoad: function () {

 },

 /**
 *       
 */
 showDeleteButton: function (e) {
 let productIndex = e.currentTarget.dataset.productindex
 this.setXmove(productIndex, -65)
 },

 /**
 *       
 */
 hideDeleteButton: function (e) {
 let productIndex = e.currentTarget.dataset.productindex

 this.setXmove(productIndex, 0)
 },

 /**
 *   movable-view  
 */
 setXmove: function (productIndex, xmove) {
 let productList = this.data.productList
 productList[productIndex].xmove = xmove

 this.setData({
  productList: productList
 })
 },

 /**
 *   movable-view    
 */
 handleMovableChange: function (e) {
 if (e.detail.source === 'friction') {
  if (e.detail.x < -30) {
  this.showDeleteButton(e)
  } else {
  this.hideDeleteButton(e)
  }
 } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
  this.hideDeleteButton(e)
 }
 },

 /**
 *   touchstart  
 */
 handleTouchStart(e) {
 this.startX = e.touches[0].pageX
 },

 /**
 *   touchend  
 */
 handleTouchEnd(e) {
 if(e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {
  this.showDeleteButton(e)
 } else if(e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {
  this.showDeleteButton(e)
 } else {
  this.hideDeleteButton(e)
 }
 },

 /**
 *     
 */
 handleDeleteProduct: function ({ currentTarget: { dataset: { id } } }) {
 let productList = this.data.productList
 let productIndex = productList.findIndex(item => item.id === id)
 productList.splice(productIndex, 1)
 this.setData({
  productList
 })
 if (productList[productIndex]) {
  this.setXmove(productIndex, 0)
 }
 },

 /**
 * slide-delete     
 */
 handleSlideDelete({ detail: { id } }) {
 let slideProductList = this.data.slideProductList
 let productIndex = slideProductList.findIndex(item => item.id === id)
 slideProductList.splice(productIndex, 1)
 this.setData({
  slideProductList
 })
 }
})

총결산
이 작은 프로그램 이 왼쪽 미끄럼 삭제 효 과 를 실현 하 는 것 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 작은 프로그램 왼쪽 미끄럼 삭제 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!