效果图
实现代码
wxml
<view class="contents">
<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{recordList}}" wx:key="">
<view class="content">
<view class="content_name">{{item.nickname}}</view>
<view class="content_time">{{item.birthday}}</view>
</view>
<view class="del" data-id="{{item.d_id}}" data-status="{{item.status}}" catchtap="del" data-index="{{index}}">删除</view>
</view>
</view>
wxss
.contents{
width:100%;
min-height: 100%;
}
.touch-item {
height: 130rpx;
width: 100%;
background: #fff;
border-bottom: 1rpx solid #eee;
display: flex;
/* //均匀排布每个元素 */
justify-content: space-between;
width: 100%;
overflow: hidden;
}
.content {
width: 100%;
padding: 0 30rpx;
/* margin-right:0; */
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(150rpx);
transform: translateX(150rpx);
margin-left: -150rpx;
box-sizing: border-box;
}
.del {
width: 150rpx;
height: 100%;
background-color: red;
color: white;
display: flex;
justify-content: center;
align-items: center;
-webkit-transform: translateX(90px);
transform: translateX(90px);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.content_name{
font-size: 28rpx;
color: #333;
line-height: 30rpx;
margin: 30rpx 0 28rpx;
}
.content_time{
color: rgb(153,153,153);
font-size: 20rpx;
line-height: 20rpx;
}
.touch-move-active .content,
.touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
js
const app = getApp()
import { getJSON, postJSON } from '../../utils/server.js';
Page({
data: {
recordList: [],
startX: 0, //开始坐标
startY: 0
},
onLoad: function (options) {
postJSON('wuxingHistory',{user_id:app.globalData.userId}, res => {
if(res.data.code==0){
let data = res.data.result
this.setData({
recordList: data
})
}
})
},
//手指触摸动作开始 记录起点X坐标
touchstart: function (e) {
//开始触摸时 重置所有删除
this.data.recordList.forEach(function (v, i) {
if (v.isTouchMove)//只操作为true的
v.isTouchMove = false;
})
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
recordList: this.data.recordList
})
},
//滑动事件处理
touchmove: function (e) {
var that = this,
index = e.currentTarget.dataset.index,//当前索引
startX = that.data.startX,//开始X坐标
startY = that.data.startY,//开始Y坐标
touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
//获取滑动角度
angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
that.data.recordList.forEach(function (v, i) {
v.isTouchMove = false
//滑动超过30度角 return
if (Math.abs(angle) > 30) return;
if (i == index) {
if (touchMoveX > startX) //右滑
v.isTouchMove = false
else //左滑
v.isTouchMove = true
}
})
//更新数据
that.setData({
recordList: that.data.recordList
})
},
/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
//删除事件
del: function (e) {
postJSON('wuxingIsdelete',{d_id:e.currentTarget.dataset.id,status:e.currentTarget.dataset.status}, res => {
if(res.data.code==0){
postJSON('wuxingHistory',{user_id:app.globalData.userId}, res => {
if(res.data.code==0){
let data = res.data.result
this.setData({
recordList: data
})
}
})
}
})
}
})