欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

小程序 实现左滑删除

程序员文章站 2022-03-23 11:16:43
小程序 左滑删除...

小程序 左滑删除

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

相关标签: 小程序 前端