左側のスライドを削除する効果を達成するための小さなプログラム

左スライド可動エリアアセンブリと可動ビューを使用して効果アプレットを削除します  

ドキュメント：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

 

図1に示すように、可動領域の基本概念

（1）movable-area普通にこれは、動きの領域の定義である<view></view>意味は下を見た後、それを除いて、同じです。

注意：可動領域は幅と高さの属性を設定する必要があり、デフォルトは10pxのに設定されていません

（2）movable-viewこれは、可動コンテナの図であるページでスライドをドラッグすることができます。

可動ビューは、デフォルト10pxのによって設定されていない場合、幅と高さのプロパティを設定しなければならない
絶対位置、上部可動ビューデフォルトと0PXするプロパティを左
可動面積よりも小さい可動ビューは、可動視点の移動範囲が可動領域内である場合内部;可動ビューが可動領域よりも大きい場合、可動視点の移動範囲は、（別々に考慮される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。
  背景：赤 ; 
}