小程序實現左滑刪除效果

小程序的左滑刪除效果用的是組件 movable-area 和 movable-view  

文檔 ： https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

 

1、movable-area基本概念

（1）movable-area這個就是定義了一個移動的區域，跟普通的<view></view>的含義是一樣的，不同在於，接着往下看；

注意：movable-area 必須設置width和height屬性，不設置默認為10px

（2）movable-view這個就是一個可移動的視圖容器，可以在頁面中拖拽滑動。

movable-view 必須設置width和height屬性，不設置默認為10px
movable-view 默認為絕對定位，top和left屬性為0px
當movable-view小於movable-area時，movable-view的移動范圍是在movable-area內；當movable-view大於movable-area時，movable-view的移動范圍必須包含movable-area（x軸方向和y軸方向分開考慮）

• 但是要注意： movable-view必須在<movable-area/>組件中，並且必須是直接子節點，否則不能移動。

 

movable-view 還有很多屬性，這里就不介紹了.

 

2、頁面結構

test.wxml

<!--pages/test/test.wxml-->
<view class="page">

<movable-area class="m_a" >
  <movable-view class="data_list" direction="horizontal" inertia="true"  out-of-bounds="true">

   <view  class="d_box">
    <view class="data">內容內容內容內容內容內容內容</view>
    <view>刪除</view>
   </view>
  
  </movable-view>

</movable-area>


</view>

test.wxss

/* pages/test/test.wxss */
.page{
  width: 100vw;
  height: 100vh;
}
.m_a{
  width: 100%;
  height: 100%;
  border: 1rpx solid gray; 
}
.data_list{
  height: 200rpx;
  width: 120%;
  border: 1rpx solid red;
}
.d_box{
  display: flex;
  justify-content: flex-start;
  justify-items: center;
  height: 100%;
}
.data{
  width: 100vw;
  background: red;
}