1608531471.jpg
頁(yè)面DOM：index.wxml
<view class="touchList {{(moving && moveIndex==index) ? "moving" :""}}" wx:for="{{listData}}" wx:key="index">
<view class="device_item" bindtap="go" bindtouchstart="touchS" bindtouchmove="touchM" data-index="{{index}}">
</view>
<view class="touchBtn">
<view class="editBtn" bindtap="editBtn">修改</view>
<view class="delBtn" bindtap="delBtn">刪除</view>
</view>
</view>
邏輯層:index.js
data{
moving:false,
moveIndex:-1
}
touchS(e) {
let index = e.currentTarget.dataset.index;
// 獲得起始坐標(biāo)
this.startX = e.touches[0].clientX;
this.startY = e.touches[0].clientY;
this.setData({
moveIndex:index
})
},
touchM(e) {
// 獲得當(dāng)前坐標(biāo)
this.currentX = e.touches[0].clientX;
this.currentY = e.touches[0].clientY;
const x = this.startX - this.currentX; //橫向移動(dòng)距離
const y = Math.abs(this.startY - this.currentY); //縱向移動(dòng)距離，若向左移動(dòng)有點(diǎn)傾斜也可以接受
if (x > 35 && y < 110) {
//向左滑是顯示刪除
this.setData({
moving: true
})
} else if (x < -35 && y < 110) {
//向右滑
this.setData({
moving: false
})
}
}
樣式:index.wxss
.touchList{
position:relative;
}
.touchList .device_item{
position: relative;
left: 0;
transition: all 0.3s;
}
.touchList.moving .device_item{
left: -280rpx;
}
.touchList .touchBtn{
position: absolute;
display: flex;
height: 100%;
right: -280rpx;
top: 0;
transition: all 0.3s;
}
.touchList.moving .touchBtn{
right: 0rpx;
}
.touchList .touchBtn view{
display: flex;
justify-content: center;
align-items: center;
width: 140rpx;
height: 100%;
color: #fff;
font-size: 24rpx;
}
.touchList .touchBtn view.editBtn{
background: #0070CC;
}
.touchList .touchBtn view.delBtn{
background: red;
}
