{list.map((item, index) => {
return (
<View
className={`${styles.pos} ${item.isOpened ? styles.isOpened : ''}`}
onTouchStart={touchstart}
onTouchMove={e => touchmove(e, index)}
onTouchEnd={touchE}
>
<View className={styles.item}>
{/* <Image src={del} onClick={() => handleDel(item)} className={styles.del}></Image> */}
<Image src={lable_xinyuan} className={styles.lable_xinyuan}></Image>
<View className={styles.title}>
<View className={styles.name}>图书名称:</View>
<Text className={styles.title_value}>{item.name}</Text>
</View>
<View className={styles._item}>
<Text>提交时间:{item.createTime}</Text>
</View>
<View className={styles._item}>
<Text>系统反馈:{item.feedback}</Text>
</View>
{item.ifPurchase == 1 && item.isbn && (
<View className={styles._btn} onClick={() => handleGoDetail(item.isbn)}>
去借阅
</View>
)}
</View>
<View className={styles.del_r} onClick={() => handleDel(item)}></View>
</View>
);
})}
const touchE = e => {
// console.log(e);
if (e.changedTouches.length == 1) {
//手指移动结束后触摸点位置的X坐标
var endX = e.changedTouches[0].clientX;
//触摸开始与结束,手指移动的距离
var disX = startX - endX;
console.log(disX, 1111);
//获取手指触摸的是哪一项
}
};
//手指触摸动作开始 记录起点X坐标
const touchstart = e => {
setStartX(e.changedTouches[0].clientX);
setStartY(e.changedTouches[0].clientY);
};
//滑动事件处理
const touchmove = (e, index) => {
let touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
touchMoveY = e.changedTouches[0].clientY; //滑动变化坐标
//获取滑动角度
const angleResult: any = angle(
{
X: startX,
Y: startY
},
{
X: touchMoveX,
Y: touchMoveY
}
);
//滑动超过30度角 return
if (Math.abs(angleResult) > 30) return;
if (touchMoveX > startX) {
//右滑
console.log('右滑', index);
let newlist = list.map((j, i) => {
return {
...j,
isOpened: false
};
});
setList(newlist);
} else {
//左滑
console.log('左滑', index);
let newlist = list.map((j, i) => {
if (i == index) {
return {
...j,
isOpened: true
};
}
return {
...j,
isOpened: false
};
});
setList(newlist);
}
};
/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
const angle = (start, end) => {
var _X = end.X - start.X,
_Y = end.Y - start.Y;
//返回角度 /Math.atan()返回数字的反正切值
return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
};
.list {
.item {
padding: 20px 15px;
margin: 0 15px;
background-color: #fff;
border-radius: 8px;
position: relative;
margin-bottom: 15px;
.title {
font-weight: bold;
font-size: 15px;
color: #989898;
display: flex;
.name {
width: 75px;
}
.title_value {
flex: 1;
color: #333333;
margin-right: 45px;
}
}
._item {
margin-top: 10px;
font-size: 14px;
color: #989898;
}
._btn {
width: 70px;
height: 30px;
background-color: #fdd000;
border-radius: 16px;
font-size: 14px;
color: #333333;
position: absolute;
right: 15px;
bottom: 14px;
text-align: center;
line-height: 30px;
}
}
}
.lable_xinyuan {
width: 24px;
height: 30px;
position: absolute;
top: 0;
right: 10px;
}
.del {
width: 16px;
height: 16px;
position: absolute;
right: 14px;
bottom: 14px;
}
.list {
overflow: hidden;
}
.pos {
position: relative;
left: -0px;
transition: all 0.2s;
.del_r {
position: absolute;
width: 40px;
height: 40px;
// margin-right: 15px;
background: url('../../../static/1.4.4/del_icon@2x.png') no-repeat;
background-size: 100% 100%;
right: -43px;
top: 50%;
transform: translate(0, -50%);
}
.item {
position: relative;
}
}
.isOpened {
left: -63px; // 展开
}
思路:
css写布局,增加过渡效果,逻辑控制哪一条展开,展开项增加展开样式,滑动判断