Small program to achieve the effect of deleting the left slide

Left slide delete effect applet using a movable-area assembly and movable-view  

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

 

1, movable-area basic concepts

(1) movable-areaThis is the definition of an area of a moving, with the ordinary <view></view>meaning is the same, except that, then look down;

Note: movable-area must set the width and height attributes, the default is not set 10px

(2) movable-viewThis is a view of the movable container, can drag the slide in the page.

movable-view must be set width and height properties, is not set by default 10px
movable-view defaults to absolute positioning, top and left properties to 0px
when the movable-view smaller than the movable-area, the moving range of movable-view is the movable-area in inside; when movable-view is larger than movable-area, the moving range of the movable-view must include the movable-area (x-axis direction and the y-axis direction are considered separately)

• But note: movable-view must be <movable-area /> assembly and must be a direct child node, or can not move.

 

movable-view, there are many attributes, not presented here.

 

2, page structure

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</Delete
   >
  
  </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;
}