작은 프로그램은 왼쪽 슬라이드를 삭제의 효과를 달성하기 위해

왼쪽 슬라이드 삭제 효과 애플릿 가동 영역 조립체 및 가동 뷰를 사용  

문서 : https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

 

1 가동 영역의 기본 개념

(1) movable-area이 이동하는 영역의 정의는 통상적으로, 인 <view></view>의미한다는 점을 제외하고 아래로 보면 동일하다;

이동 지역은 너비를 설정해야하고 높이가 기본값이 설정되어 있지 않은, 10px 속성 참고 :

(2) movable-view이 가동 용기의 도면이다 페이지에서 슬라이드를 드래그 할 수있다.

가동 도면 기본 10px 의해 설정되지 않으며, 폭과 높이 속성을 설정해야
절대 위치, 상단을 가동 뷰 기본값과 0 픽셀 속성을 왼쪽으로
이동 영역보다 작다 가동보기, 가동 뷰의 이동 범위가 가동 지역 일 때 내부, 가동보기 가동 영역보다 클 때, 가동 뷰의 이동 범위 (별도 간주 x 축 방향 및 y 축 방향)의 가동 영역을 포함해야

• 그러나 참고 : 이동-보기 <이동 지역 /> 조립해야하며, 직접 자식 노드를해야한다, 또는 이동할 수 없습니다.

 

이동 뷰, 많은 속성이, 여기에 소개하지.

 

2 페이지 구조

test.wxml

<! - 페이지 / 테스트 / test.wxml -> 
< 뷰 클래스 = "페이지" > 

< 이동 지역의 클래스 = "m_a"  > 
  < 이동 뷰 클래스 = "DATA_LIST" 방향 = "수평" 관성 = "진정한 "   아웃 오브 바운드 ="참 " > 

   < 뷰   클래스 ="d_box " > 
    < 뷰 클래스 ="데이터 " >内容内容内容内容内容内容内容</ 뷰 > 
    < 도면 >삭제 </ 보기 > 
   </ 보기> 
  
  </ 가동 뷰 > 

</ 가동 영역 > 


</ 뷰 >

test.wxss

/ * 페이지 / 테스트 / test.wxss * / 
.page { 
  폭 : 100vw ; 
  높이 : 100vh ; 
} 
.m_a { 
  폭 : 100 % ; 
  신장 : 100 % ; 
  국경 : 1rpx 고체 회색 ; 
} 
.data_list { 
  높이 : 200rpx ; 
  폭 : 120 % ; 
  국경 : 빨간색 1rpx 고체 ; 
} 
.d_box { 
  디스플레이 :플렉스 ; 
  정당화-내용 : 플렉스 시작 ; 
  정당화-항목 : 센터 ; 
  신장 : 100 % ; 
} 
.DATA { 
  폭 : 100vw ; 
  배경 : 빨간색 ; 
}