效果图如下所示
仿京东微信小程序视频请加QQ:1010753897
下载地址:https://download.csdn.net/download/qq_43764578/12314561
.wxml
<view class="box">
<view class="item {{status ? '' :'active'}}">
<view class="centent" bindtouchstart="touchS" bindtouchmove="touchM">
内容
</view>
<view class="del-button">
删除
</view>
</view>
</view>
.wxss
page{
background-color: #f7f7f7;
}
view{
box-sizing: border-box;
}
.box{
height: 100%;
}
.item{
position:relative;
top: 0;
width: 100%;
height: 240rpx;
border-bottom: #d9d9d9 solid 1rpx;
padding: 0;
}
.centent{
width: 100%;
height: 100%;
background-color: #39b54a;
line-height: 240rpx;
text-align: center;
color: #fff;
position: relative;
left: 0;
transition: all 0.3s;
}
.item .del-button {
position: absolute;
right: -140rpx;
width: 140rpx;
height: 100%;
background-color: #EE0A24;
color: #fff;
top: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
font-size: 24rpx;
}
.item.active .centent{
left: -140rpx;
}
.item.active .del-button{
right: 0;
}
.js
Page({
data: {
status: true
},
touchS(e) {
this.startX = e.touches[0].clientX;
this.startY = e.touches[0].clientY;
},
touchM(e) {
this.currentX = e.touches[0].clientX;
this.currentY = e.touches[0].clientY;
const x = this.startX - this.currentX;
const y = Math.abs(this.startY - this.currentY);
if (x > 35 && y < 110) {
this.setData({
status: false
})
} else if (x < -35 && y < 110) {
this.setData({
status: true
})
}
},
})
有什么问题欢迎评论留言,我会及时回复你的