目录：在我们日常的开发过程中应该都会遇到这样的要求；《一个商品盒子在左滑以后出现删除按钮》；最开始我是在vant里面的组件中发现这个；但是针对公司的一些要求在布局上感觉不是那么好；后来去看了那些大佬写的文章以后感觉也不是那么难；如果今天在这儿写一个简单的dome；做一哈记录；也让大家相互学习学习；如果表达的不对的；希望大佬们多多提出意见；
首先先来一个效果图
这个我就不分步骤了；直接上代码；后面我再一一说说思路
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #2c3c4f
}
.box {
position: relative;
top: 200px;
margin: 0 auto;
font-size: 14px;
width: 300px;
height: 45px;
overflow: hidden;
}
.boxItem {
position: absolute;
top: 0;
left: 0;
transition: all .5s;
height: 45px;
width: 340px;
background-color: #32495d;
}
.left {
float: left;
text-align: center;
width: 300px;
height: 45px;
line-height: 45px;
background-color: #fff;
}
.right {
float: right;
color: #fff;
width: 40px;
text-align: center;
height: 45px;
line-height: 45px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="boxItem">
<div class="left">左滑删除效果</div>
<div class="right">删除</div>
</div>
</div>
</body>
<script>
let pageXstart
let pageYstart
let boxItem = document.querySelector('.boxItem')
let right = document.querySelector('.right')
boxItem.ontouchstart = function ($event){
let e = event
pageXstart = e.touches[0].pageX
pageYstart = e.touches[0].pageY
}
boxItem.ontouchmove = function ($event){
let e = event
let pageXmove = e.touches[0].pageX
let pageYmove = e.touches[0].pageY
// let x = Math.abs(pageXmove - pageXstart)
// let y = Math.abs(pageYmove - pageYstart)
let x = pageXstart - pageXmove
let y = pageYstart - pageYmove
if(x>right.scrollWidth){
boxItem.style.left = -right.scrollWidth + 'px'
}
if(x<right.scrollWidth) {
boxItem.style.left = 0 + 'px'
}
if(y>boxItem.scrollHeight) {
boxItem.style.left = 0 + 'px'
}
}
</script>
</html>第一：我们首先来想第一个问题；我们需要把一个删除按钮这个盒子隐藏掉；然后在我们滑动的时候，这个删除按钮盒子又得出现在我们的眼前怎么办？
这个时候我们就要这样想；我们需要把删除按钮显示出来；那么他的兄弟元素必然会隐藏一部分；所以我们需要移动的一定是删除按钮的父级；既然我们要移动的是父级（boxItem），那么父级（boxItem）一定是比它的父级（box）更宽的；所以就需要在box上出现 ** overflow: hidden; ** ；把多余的部分隐藏起来；然后根据定位（left）来移动距离；就达成滑动效果了
第二：基本样式做好以后；我们现在考虑的就是怎样让其滑动起来了
这儿的话先给大家说2个移动端的事件
ontouchmove // 手指在屏幕上移动时触发；
ontouchstart // 手指按下时触发；我们在知道这两个事件以后就简单了；大家这样想；当我们的手指触摸到屏幕的时候的位置是多少？然后我们在此过程移动的距离是多少？
打个比方哈：你想让用户移动了40的距离就出现删除按钮；当我们点击以后x轴的位置是100；然后你的手指在移动的过程中到了60的位置；那么这个时候你就让其left移动40出现删除按钮即可；如果想有动画效果做一个过渡就好了；其实原理就是这么简单
第三：如果我有多个商品盒子怎么办呢？
如果你有多个盒子的话；只需要用一个循环就行了；切记这个不要用var声明；如果用var的话会出现闭包问题；直接用let即可；如果你确实想用var的是；可以根据以下代码进行修改；这是原来做一个效果的代码：也就是在事件外增加一个立即执行函数即可
for(let i=0;i<li.length;i++){ !function(i){
li[i].onmouseover = function(){
admin.style.left = i*80 + 'px'
}
}(i)
}以上呢就是这个dome的简单思路；可能在表达上不是很好；但是我相信大家去写一个一下就明白了；
记录自己；记录生活；记录明天