微信滑动删除
*{
padding: 0;
margin: 0;
}
html {
font-size: 20px;
}
body {
font-size: 16px;
}
@media only screen and (max-width: 320px) { html {
font-size: 42.7px !important;
}}
@media only screen and (min-width: 321px) and (max-width: 360px) { html {
font-size: 48px !important;
}}
@media only screen and (min-width: 361px) and (max-width: 375px) { html {
font-size: 50px !important;
}}
@media only screen and (min-width: 376px) and (max-width: 384px) { html {
font-size: 52.1px !important;
}}
@media only screen and (min-width: 385px) and (max-width: 414px) { html {
font-size: 55.2px !important;
}}
@media only screen and (min-width: 415px) and (max-width: 480px) { html {
font-size: 64px !important;
}}
@media only screen and (min-width: 481px) and (max-width: 540px) { html {
font-size: 72px !important;
}}
@media only screen and (min-width: 750px) { html {
font-size: 100px !important;
}}
.line{
width: 7.5rem;
height: 1.35rem;
}
.line_move{
width: 7.5rem;
height: 100%;
font-size: 0.28rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
border-bottom: 1px solid #E0E0E0;
background-color: white;
box-sizing: border-box;
float: left;
position: relative;
z-index: 2;
}
.reimbu_top{
padding-top: 0.2rem;
}
.reimbu_top>span:nth-child(2){
float: right;
color: #FFAA00;
}
.reimbu_bottom{
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.reimbu_bottom>span:nth-child(2){
float: right;
}
.line_right{
position: relative;
left: 4.3rem;
height: 1.32rem;
width: 3.2rem;
}
.line_right div{
width: 1.6rem;
height: 1.32rem;
line-height: 1.32rem;
text-align: center;
font-size: 0.26rem;
box-sizing: border-box;
}
.line_right>div:nth-child(1){
background-color: yellow;
position: absolute;
top: 0;
right: 1.6rem;
}
.line_right>div:nth-child(2){
background-color: #fb4748;
position: absolute;
top: 0;
right: 0;
}
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
做个安静的美女子
10001.00元
2017-08-28
未打印
编辑
删除
var moveArr = document.getElementsByClassName('line_move');
var startX = 0;
var moveX = 0;
var moveStatus = 0; // 0:未滑出 1：已滑出
var arr = []; // 判断手指触摸数量
function handler() {
return false;
}
for(var i=0; i<moveArr.length; i++) {
moveArr[i].addEventListener('touchstart', function(event){
startX = event.touches[0].clientX;
arr.push(this.getAttribute('index')); //arr.push(1); 不需要索引值就用这个
// 添加阻止默认行为
// this.addEventListener('touchmove', handler, false);
})
moveArr[i].addEventListener('touchmove', function(event){
moveX = event.touches[0].clientX - startX;
})
moveArr[i].addEventListener('touchend', function(event){
moveEnd = moveX*0.01;
console.log(moveEnd);
//向左滑动
if( moveEnd 1 ){
this.style.transform = "translate("+-3.2+"rem)";
moveStatus = 1;
}else{
this.style.transform = "translate("+0+"rem)";
moveStatus = 0;
}
}else if(moveEnd 0 && moveEnd > 1){
this.style.transform = "translate("+0+"rem)";
moveStatus = 0;
}
this.style.transitionDuration ="0.5s";
moveX = 0;
// 解绑事件
this.removeEventListener('touchmove', handler, false);
})
}
for(var i=0; i<moveArr.length; i++) {
moveArr[i].addEventListener("touchstart", function(e){
arr = [];
moveStatus = 0;
for(var j=0; j<moveArr.length; j++){
moveArr[j].style.transform = "translate("+0+"rem)";
}
});
}
声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：qvyue@qq.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
点击咨询 