HTML5+JS+CSS简单的实现左滑出现删除菜单，类似微信删除聊天框，代码完整
HTML5+JS+CSS简单的实现左滑出现删除菜单，类似微信删除聊天框，代码完整
1、HTML部分，我在此处写了两个商品卡片，用来操作
<div class="lame-card-list-tb lame-mt-2">
<div style="display: flex;">
<div class="right_menu lame-card-item lame-flex lame-ai-center lame-jc-between">
<div class="left lame-flex lame-ai-center">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1220403926,908266914&fm=111&gp=0.jpg" alt="">
div>
<div class="right lame-flex lame-flex-column">
<span class="right_title only-two-line">【原封正品】2020新款Apple/苹果 11英寸iPad Pro全面屏平板电脑便携式商务办公学生教育电脑支持面容IDspan>
<span class="right_desc only-two-line">面容ID解锁 Liquid视网膜显示屏 A12Z芯片span>
<span class="right_size">256Gspan>
<div class="right_tag_list">
<span class="tag_item">APPLEspan>
<span class="tag_item">旗舰店span>
<span class="tag_item">正品保障span>
<span class="tag_item">极速发货span>
<span class="tag_item">顺丰包邮span>
div>
<div class="right_content lame-flex lame-ai-end">
<div class="content_price">
<span class="price_unit">¥span>
<span class="price_num">9899.99span>
div>
<div class="content_sale">
<span>9999件已售span>
div>
div>
div>
div>
<div class="slide-menu">
收藏
div>
div>
<div style="display: flex;">
<div class="right_menu lame-card-item lame-flex lame-ai-center lame-jc-between">
<div class="left lame-flex lame-ai-center">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1220403926,908266914&fm=111&gp=0.jpg" alt="">
div>
<div class="right lame-flex lame-flex-column">
<span class="right_title only-two-line">【原封正品】2020新款Apple/苹果 11英寸iPad Pro全面屏平板电脑便携式商务办公学生教育电脑支持面容IDspan>
<span class="right_desc only-two-line">面容ID解锁 Liquid视网膜显示屏 A12Z芯片span>
<span class="right_size">256Gspan>
<div class="right_tag_list">
<span class="tag_item">APPLEspan>
<span class="tag_item">旗舰店span>
<span class="tag_item">正品保障span>
<span class="tag_item">极速发货span>
<span class="tag_item">顺丰包邮span>
div>
<div class="right_content lame-flex lame-ai-end">
<div class="content_price">
<span class="price_unit">¥span>
<span class="price_num">9899.99span>
div>
<div class="content_sale">
<span>9999件已售span>
div>
div>
div>
div>
<div class="slide-menu">
收藏
div>
div>
div>
2、JS部分（引入js，并通过 屏幕 触摸事件来实现）
主要是通过触摸开始和触摸结束的 “差” ，来判断我们 滑动的方向，代码如下：
// 滑动出现菜单-------------------------------------------------------------
// 开始触碰
$(".right_menu").on("touchstart", function (e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX;
});
// 结束触碰
$(".right_menu").on("touchmove", function (e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
X = moveEndX - startX;
// 通过开始和结束的差判断是左滑还是右滑
if (X > 0) {
$(this).css('margin-left', '0');
$('.slide-menu').css('display', 'none');
} else if (X < 0) {
$(".right_menu").css('margin-left', '0');
$(this).css('margin-left', '-90px');
$('.slide-menu').css('display', 'none');
$(this).next('.slide-menu').css('display', 'flex');
}
});
// 滑动出现菜单-------------------------------------------------------------
3、css部分（此处我简单的做了下样式，仅供参考，可根据自己需求进行修改）代码如下：
body {
margin: 0;
}
.lame-card-list-tb .right_menu {
transition: .5s;
}
.lame-card-list-tb .slide-menu {
background-color: red;
color: #fff;
margin-right: -5.625rem;
width: 5.625rem;
display: flex;
align-items: center;
justify-content: center;
display: none;
font-size: 0.875rem;
}
.lame-card-list-tb .lame-card-item {
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
width: 100%;
}
.lame-card-list-tb .lame-card-item .left {
width: 30%;
display: flex;
justify-content: center;
}
.lame-card-list-tb .lame-card-item .left img {
width: 90%;
}
.lame-card-list-tb .lame-card-item .right {
flex: 1;
}
.lame-card-list-tb .lame-card-item .right div,
.lame-card-list-tb .lame-card-item .right span {
margin-bottom: 5px;
}
.lame-card-list-tb .lame-card-item .right .right_title {
color: #333;
font-size: 0.875rem;
font-weight: bold;
}
.lame-card-list-tb .lame-card-item .right .right_desc {
color: #999;
font-size: 0.75rem;
}
.lame-card-list-tb .lame-card-item .right .right_size {
color: #999;
font-size: 0.75rem;
}
.lame-card-list-tb .lame-card-item .right .right_tag_list .tag_item {
font-size: 0.75rem;
color: #FF5E28;
border: 1px solid #FF5E28;
padding: 0 0.3125rem;
border-radius: 0.25rem;
}
.lame-card-list-tb .lame-card-item .right .right_content .content_price {
color: #FF5E28;
}
.lame-card-list-tb .lame-card-item .right .right_content .content_price .price_unit {
font-size: 0.75rem;
}
.lame-card-list-tb .lame-card-item .right .right_content .content_price .price_num {
font-size: 1rem;
}
.lame-card-list-tb .lame-card-item .right .right_content .content_sale {
color: #999;
font-size: 0.75rem;
margin-left: 0.3125rem;
}
这样就完成了，如果大家有更好的方法或需要改进的地方欢迎交流学习。