小程序 实现左滑删除

小程序 左滑删除

movable-area

movable-view的可移动区域。

属性	类型	默认值	必填	说明	最低版本
scale-area	Boolean	false	否	当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area	1.9.90

*Bug & Tip tip: movable-area 必须设置width和height属性，不设置默认为10px** tip: 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内； tip: 当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑

movable-area

可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

属性	类型	默认值	必填	说明	最低版本
direction	string	none	否	movable-view的移动方向，属性值有all、vertical、horizontal、none	1.2.0
inertia	boolean	false	否	movable-view是否带有惯性	1.2.0
out-of-bounds	boolean	false	否	超过可移动区域后，movable-view是否还可以移动	1.2.0
x	number		否	定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画	1.2.0
y	number		否	定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画	1.2.0
damping	number	20	否	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	1.2.0
friction	number	2	否	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	1.2.0
disabled	boolean	false	否	是否禁用	1.9.90
scale	boolean	false	否	是否支持双指缩放，默认缩放手势生效区域是在movable-view内	1.9.90
scale-min	number	0.5	否	定义缩放倍数最小值	1.9.90
scale-max	number	10	否	定义缩放倍数最大值	1.9.90
scale-value	number	1	否	定义缩放倍数，取值范围为 0.5 - 10	1.9.90
animation	boolean	true	否	是否使用动画	2.1.0
bindchange	eventhandle		否	拖动过程中触发的事件，event.detail = {x, y, source}	1.9.90
bindscale	eventhandle		否	缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持	1.9.90
htouchmove	eventhandle		否	初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch	1.9.90
vtouchmove	eventhandle		否	初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch	1.9.90

bindchange 返回的 source 表示产生移动的原因

值	说明
touch	拖动
touch-out-of-bounds	超出移动范围
out-of-bounds	超出移动范围后的回弹
friction	惯性
空字符串	setData

 <view class="contact-person" >
   	<movable-area>
         <movable-view out-of-bounds="false" direction="horizontal" x="{{item.xmove}}" inertia="true" data-productIndex="{{index}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindchange="handleMovableChange">
             <view class="page-section">
               <view class="weui-cells__title">姓名</view>
               <view class="weui-cells weui-cells_after-title">
                 <view class="weui-cell weui-cell_input">
                   <input class="weui-input" data-index="{{index}}" name="{{'contentName' + index}}" value='{{nameVal[index]}}' bindinput='getNameVal' placeholder="请输入" />
                 </view>
               </view>
             </view>
             <view class="page-section">
               <view class="weui-cells__title">手机号</view>
               <view class="weui-cells weui-cells_after-title">
                 <view class="weui-cell weui-cell_input">
                   <input class="weui-input" data-index="{{index}}" name="{{'contentPhone' + index}}" type="number" value='{{phoneVal[index]}}' bindinput='getPhoneVal' maxlength="11" placeholder="请输入" placeholder-style="color：#acacac" />
                 </view>
               </view>
             </view>
        </movable-view>
 	 </movable-area>
	 <view class="delete-btn" data-id="{{index}}" bindtap="handleDeleteProduct">删除</view>
</view>

/**
   * 显示删除按钮
   */
  showDeleteButton: function (e) {
    let productIndex = e.currentTarget.dataset.productindex
    this.setXmove(productIndex, -65)
  },

  /**
   * 隐藏删除按钮
   */
  hideDeleteButton: function (e) {
    let productIndex = e.currentTarget.dataset.productindex
    this.setXmove(productIndex, 0)
  },

  /**
   * 设置movable-view位移
   */
  setXmove: function (productIndex, xmove) {
    let contacelist = this.data.contacelist
    contacelist[productIndex].xmove = xmove
    this.setData({
      contacelist: contacelist
    })
  },
  /**
   * 处理movable-view移动事件
   */
  handleMovableChange: function (e) {
    if (e.detail.source === 'friction') {
      if (e.detail.x < -30) {
        this.showDeleteButton(e)
      } else {
        this.hideDeleteButton(e)
      }
    } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
      this.hideDeleteButton(e)
    }
  },
  /**
   * 处理touchstart事件
   */
  handleTouchStart(e) {
    this.startX = e.touches[0].pageX
  },

  /**
   * 处理touchend事件
   */
  handleTouchEnd(e) {
    if(e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {
      this.showDeleteButton(e)
    } else if(e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {
      this.showDeleteButton(e)
    } else {
      this.hideDeleteButton(e)
    }
  },
    /**
   * 删除产品
   */
  handleDeleteProduct: function (e) {
  	// input 列表（占位用）
    let contacelist = this.data.contacelist
    // 联系人名称列表
    let nameVal = this.data.nameVal
     // 联系人电话列表
    let phoneVal = this.data.phoneVal
    // 想要删除的input 的坐标
    let productIndex = e.currentTarget.dataset.id
    if (this.data.contacelist.length>1) {
      contacelist.splice(productIndex, 1)
      nameVal.splice(productIndex, 1)
      phoneVal.splice(productIndex, 1)
      this.setData({
        contacelist,
        nameVal,
        phoneVal
      })
      if (contacelist[productIndex]) {
        this.setXmove(productIndex, 0)
      }
    } else {
      this.setXmove(productIndex, 0)
      wx.showToast({
        title: '至少保留一个职工代表',
        icon: 'none'
      })
    }
  },

.contact-person movable-area {
  width: calc(100vw - 120rpx);
  height: 188rpx;
}
.contact-person movable-view{
  width: 100vw;
  height: 188rpx;
  z-index: 999 !important;
}
.delete-btn {
  position: absolute;
  top: 0;
  bottom: 2px;
  right: 0; 
  width: 120rpx;
  font-family: PingFangSC-Regular;
  font-size: 24rpx;
  color: #FFFFFF;
  line-height: 180rpx;
  z-index: 1;
  background: #E66671;
  text-align: center;
}

本文地址：https://blog.csdn.net/MAYA_G/article/details/107768157