小程序movable-area movable-view实现左滑删除

最新推荐文章于 2023-08-14 21:56:04 发布

码林鼠

最新推荐文章于 2023-08-14 21:56:04 发布

阅读量933

点赞数

分类专栏：小程序文章标签：左滑删除小程序左滑删除按钮 movable-area movable-view

本文链接：https://blog.csdn.net/weixin_41254345/article/details/103053602

版权

小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<view style="{{'width:'+parentW+'px;overflow-x:hidden;height:'+parentH+'px;overflow-y:scroll;'}}">
<!-- parentW是屏幕的宽度，parentH是可视区的高度 -->
<movable-area class="moveArea" wx:for="{{iteList}}" wx:key="{{item}}" bindtap="toPosiDetl" data-id="{{item.work.id}}">
  <movable-view class="moveView" x="{{item.x}}" direction="horizontal" bindtouchend="touchEnd" bindtouchstart="touchStart" animation="{{true}}" data-id="{{item.id}}">
    <view class="parent">
    </view>
    <view class="delete" catchtap="delete" data-id="{{item.work.id}}">
      <text>删除</text>
    </view>
  </movable-view>
</movable-area>
</view>

touchStart(e) {
    this.data.endX = e.changedTouches[0].clientX
  },
  touchEnd(e) {
    this.data.startX = e.changedTouches[0].clientX
    let tempList = this.data.iteList
    if (this.data.startX - this.data.endX < -20) { //左滑动
      for (let index in tempList) {
        if (tempList[index].id == e.currentTarget.dataset.id) {
          tempList[index].x = -160
          this.setData({
            iteList: tempList
          })
        }
      }
    } else if (this.data.startX - this.data.endX > 20) { //右滑动
      for (let index in tempList) {
        if (tempList[index].id == e.currentTarget.dataset.id) {
          tempList[index].x = 0
          this.setData({
            iteList: tempList
          })
        }
      }
    }
  }

.parent{
  background:#fff;
  padding:30rpx;
  padding-bottom:0;
  width:100%;
  box-sizing: border-box;
  height: 260rpx;
  display: inline-block;
}
.moveArea{//宽高要设置
  height:260rpx; 
  width: 100%;
  margin-bottom:10rpx;
}
.moveView{//宽度比父容器大，其中的删除按钮默认在可视区外
  height: 260rpx;
  width:120%;
  display:flex;
}