我要评论小程序 左滑删除
movable-area
movable-view的可移动区域。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| scale-area | Boolean | false | 否 | 当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area | 1.9.90 |
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 |
| 值 | 说明 |
|---|---|
| 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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论