movable-area
首先页面排版:
<view class="act_box">
<view class="product_item" wx:for="{{adminData}}" wx:key="index">
<movable-area class='movable-area'>
<movable-view class='movable-view bg_white' direction="horizontal" out-of-bounds="true" inertia="true">
<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}"
bindtouchstart="touchstart" bindtouchmove="touchmove">
<view class="content">
<view class="product_item_name">
{{item.realname}}
</view>
<view class="product_item_num">
{{item.employeeNumber}}
</view>
<view class="product_item_qiy" data-index="{{index}}" data-id="{{item.id}}" data-enable="{{item.enable}}" bindtap="getStatus">
<view wx:if="{{item.enable}}" class="jiy_bx">
禁用
</view>
<view wx:else class="qiy_bx">
启用
</view>
</view>
</view>
<view class="delete_btn {{item.isTouchMove ? 'delete_active' : 'delete_init'}}" catchtap="deleteAdmin"
data-id="{{item.id}}">
<view class="detele_icon">
<image style="width:100%;height:100%" src="../../images/delete.png"></image>
</view>
</view>
</view>
</movable-view>
</movable-area>
</view>
</view>
样式
- movable-area必须设置宽高,否则会被默认高度为10px
- content部分就是默认我们看得到的部分,
- 删除需要固定宽高度
.act_box{
width: 100%;
overflow: hidden;
overflow-y: auto;
}
.product_item{
position: relative;
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);
border-radius: 16rpx;
margin: 7% 0;
z-index: 999;
box-sizing: border-box;
display: flex;
}
.product_item:first-child{
margin-top: 0;
}
/* 列表布局 */
.movable-area {
width: 100%;
height: 200rpx;
}
.movable-view{
width: 100%;
height: 100%;
}
.touch-item{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
overflow: hidden;
}
.content{
width: 100%;
padding: 5% 4%;
margin-right: 0rpx;
background-color: #fff;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(120rpx);
transform: translateX(120rpx);
margin-left: -120rpx;
overflow: hidden;
box-sizing: border-box;
}
.touch-move-active .content, .touch-move-active .delete_btn {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.delete_btn{
width: 100rpx;
background: #FFFFFF;
border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-transform: translateX(100rpx);
transform: translateX(100rpx);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.delete_active{
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);
position: relative;
}
.delete_init{
box-shadow: none;
}
.detele_icon{
width: 30rpx;
height: 30rpx;
position: absolute;
top: 50%;
margin-top: -15rpx;
z-index: 1;
}
.product_item_name{
width: auto;
max-width: 70%;
font-size: 32rpx;
font-weight: bold;
line-height: 42rpx;
color: #2D2D2D;
}
.product_item_num{
font-size: 28rpx;
line-height: 36rpx;
color: #2D2D2D;
margin-top: 3%;
}
.product_item_qiy{
position: absolute;
top: 15%;
right: 5%;
width: 120rpx;
height: 60rpx;
font-size: 28rpx;
line-height: 60rpx;
text-align: center;
color: #ffffff;
}
- bindtouchstart----手指触摸动作开始,记录起始坐标的X和Y
- bindtouchmove----滑动事件处理,一次只能画出一个删除按钮
/**
* 手指触摸动作开始 记录起点X坐标
*/
touchstart(e) {
//开始触摸时 重置所有删除
this.data.adminData.forEach((item) => {
if (item.isTouchMove) {
item.isTouchMove = false
}
})
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
adminData: this.data.adminData
})
},
/**
* 滑动事件处理,一次只能滑出一个删除按钮
*/
touchmove(e) {
var that = this,
index = e.currentTarget.dataset.index,//当前索引
startX = that.data.startX, //开始x坐标
startY = that.data.startY, //开始Y坐标
touchMoveX = e.changedTouches[0].clientX, //滑动变化X坐标
touchMoveY = e.changedTouches[0].clientY, 滑动变化Y坐标
//获取滑动角度
angle = that.angle({
X: startX,
Y: startY
}, {
X: touchMoveX,
Y: touchMoveY
});
that.data.adminData.forEach((item, i) => {
item.isTouchMove = false
//滑动超过30度角 return
if (Math.abs(angle) > 30) {
return;
}
if (i == index) {
if (touchMoveX > startX) {//右滑
item.isTouchMove = false
} else {//左滑
item.isTouchMove = true
}
}
})
that.setData({
adminData: that.data.adminData
})
},
/**
* 计算滑动角度
* start 起点坐标
* end 终点坐标
* Math.PI 表示一个圆的周长与直径的比例,约为 3.14159;PI就是圆周率π,PI是弧度制的π,也就是180°
*/
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},```