微信小程序实现左滑删除
.scroll_box {
/* background-color: #f0f0f0; */
width: 100%;
height: calc(100vh - 500rpx);
margin-top: 28rpx;
padding: 0 22rpx;
}
/* item盒子 */
.box_item {
background-color: #fff;
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
border-bottom: 2rpx dashed #EDEDED;
padding-left: 30rpx;
position: relative;
}
.head_title {
height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #14AD00;
line-height: 38rpx;
text-align: left;
font-style: normal;
display: flex;
align-items: center;
text-transform: none;
}
.before-icon {
display: inline-block;
width: 9rpx;
height: 9rpx;
border-radius: 50%;
margin-right: 30rpx;
background: #14AD00;
}
.moveArea {
display: flex;
flex-direction: row;
width: calc(100% + 180rpx);
justify-content: center;
left: -180rpx;
height: 102rpx;
}
.movableView {
display: flex;
flex-direction: row;
width: calc(100% - 180rpx);
z-index: 1001;
left: 180rpx;
}
.itemDelet {
position: absolute;
right: 0;
line-height: 100rpx;
background-color: rgb(252, 65, 65);
margin-right: 6rpx;
bottom: 2rpx;
width: 180rpx;
text-align: center;
color: #fff;
}