微信小程序实现左滑删除

  movable-area和movable-view组件的应用

 

wxml代码

<movable-area class="area">
  <movable-view class="view"  direction="horizontal" inertia="{{true}}"out-of-bounds="{{true}}" >消息一</movable-view>
  <image src="" class="avatar"></image>
  <view class="delete">删除</view>
</movable-area>

css代码

.area{
  margin: 20rpx;
  width: calc(100% - 40rpx);
  height: 100rpx;
  background-color: white;
  position: relative;
  left: 0rpx;
  top: 0rpx;
}
.view{
  width: calc(100% - 120rpx);
  height: 100rpx;
  background-color: white;
  position: absolute;
  top: 0rpx;
  left: 120rpx;
  z-index: 2;
  line-height: 100rpx;
  /* text-align: center; */
}
.delete{
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  background-color: rgb(238, 166, 79);
  color: white;
  line-height: 100rpx;
  text-align: center;
}
.avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
}