<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>微信滑動刪除</title>
<!--<link rel="stylesheet" type="text/css" href="base.css"/>-->
<style>
*{
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;
}
</style>
</head>
<body>
<div class="box-1">
<div class="box_count">
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
<div class="line">
<div class="line_move" index="1">
<div class="reimbu_top">
<span>做個安靜的美女子</span>
<span>10001.00元</span>
</div>
<div class="reimbu_bottom">
<span>2017-08-28</span>
<span>未打印</span>
</div>
</div>
<div class="line_right">
<div>編輯</div>
<div onclick="test(1)">刪除</div>
</div>
</div>
</div>
</div>
<script>
var moveArr = document.getElementsByClassName('line_move');
var startX = 0;
var moveX = 0;
var moveStatus = 0; // 0:未滑出 1：已滑出
var arr = []; // 判斷手指觸摸數(shù)量
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); 不需要索引值就用這個
// 添加阻止默認(rèn)行為
// 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 < 0 && moveStatus == 0){ //未滑出
if( Math.abs(moveEnd) > 1 ){
this.style.transform = "translate("+-3.2+"rem)";
moveStatus = 1;
}else{
this.style.transform = "translate("+0+"rem)";
moveStatus = 0;
}
}else if(moveEnd < 0 && moveStatus == 1){ //已滑出
moveArr[this.getAttribute('index')].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)";
}
});
}
</script>
</body>
</html> 原聲js模擬微信滑動
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- JavaScript 類型轉(zhuǎn)換Number() 轉(zhuǎn)換為數(shù)字， String() 轉(zhuǎn)換為字符串， Boolean()...
- 一 自定義WeiXinTabChangeView 1 自定義屬性attrs.xml： <?xml v...
- 楔子 漢武帝讀司馬相如的子虛賦，忽然悵恨地說： “朕獨(dú)不得與此人同時哉！” 他錯了，司馬相如并沒有死，好文章并不一...
