JS 기반으로 모바일 단말기에서 왼쪽으로 슬라이드 시 삭제 버튼 기능 구현
- 高洛峰원래의
- 2017-02-23 17:17:121993검색
최근 모바일 프로젝트를 작업할 때 목록 페이지의 각 항목을 왼쪽으로 밀면 나타나는 해당 삭제 버튼을 구현해야 했습니다. 원래는 zepto의 touch.js 플러그인을 직접 사용하고 싶었습니다. 이전에 동일한 기능이 구현되었기 때문에 이 플러그인을 사용했는데 매우 사용하기 쉬웠습니다. swipeLeft 및 swipeRight 메소드를 사용하면 됩니다. 그러나 오늘 이 기능을 다시 사용하기 시작하면서 이러한 기능을 발견했습니다. 두 가지 방법을 사용해도 효과가 없었고 전혀 반응이 없었습니다. 온라인에서 정보를 확인하고 최신 버전의 zepto와 touch.js를 다운로드했는데 작동하지 않는 이유는 무엇인가요? 그래서 이 플러그인은 폐기되었습니다.
다음은 제가 나중에 구현한 코드입니다. 실제로 네이티브 js의 터치 이벤트를 사용한 다음 터치 지점의 좌표를 결합하여 왼쪽 및 오른쪽 스와이프를 결정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>js侧滑显示删除按钮</title>
<style>
*{margin:0;padding:0;}
body{font-size:.14rem;}
li{list-style:none;}
i{font-style:normal;}
a{color:#393939;text-decoration:none;}
.list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}
.list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}
.list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}
.list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}
.swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}
</style>
<script>
//计算根节点HTML的字体大小
function resizeRoot(){
var deviceWidth = document.documentElement.clientWidth,
num = 750,
num1 = num / 100;
if(deviceWidth > num){
deviceWidth = num;
}
document.documentElement.style.fontSize = deviceWidth / num1 + "px";
}
//根节点HTML的字体大小初始化
resizeRoot();
window.onresize = function(){
resizeRoot();
};
</script>
</head>
<body>
<section>
<p class="list">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >侧滑显示删除按钮1<i>删除</i></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >侧滑显示删除按钮2<i>删除</i></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >侧滑显示删除按钮3<i>删除</i></a></li>
</ul>
</p>
<script>
//侧滑显示删除按钮
var expansion = null; //是否存在展开的list
var container = document.querySelectorAll('.list li a');
for(var i = 0; i < container.length; i++){
var x, y, X, Y, swipeX, swipeY;
container[i].addEventListener('touchstart', function(event) {
x = event.changedTouches[0].pageX;
y = event.changedTouches[0].pageY;
swipeX = true;
swipeY = true ;
if(expansion){ //判断是否展开，如果展开则收起
expansion.className = "";
}
});
container[i].addEventListener('touchmove', function(event){
X = event.changedTouches[0].pageX;
Y = event.changedTouches[0].pageY;
// 左右滑动
if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
// 阻止事件冒泡
event.stopPropagation();
if(X - x > 10){ //右滑
event.preventDefault();
this.className = ""; //右滑收起
}
if(x - X > 10){ //左滑
event.preventDefault();
this.className = "swipeleft"; //左滑展开
expansion = this;
}
swipeY = false;
}
// 上下滑动
if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
swipeX = false;
}
});
}
</script>
</body>
</html>
아마도 모바일 적응을 구현하기 위해 기본 js가 페이지 시작 부분에 추가되었다는 사실을 눈치채셨을 것입니다. 이는 주로 화면에 모바일 페이지를 더 잘 표시할 수 있도록 하기 위한 것입니다. 또한 매우 작은 오류로 다양한 크기의 화면에서 디자인 초안을 거의 완벽하게 표현하기 위해 사용되는 기본 단위는 rem입니다.
모바일 적응형 js
<script>
//计算根节点HTML的字体大小
function resizeRoot(){
var deviceWidth = document.documentElement.clientWidth,
num = 750,
num1 = num / 100;
if(deviceWidth > num){
deviceWidth = num;
}
document.documentElement.style.fontSize = deviceWidth / num1 + "px";
}
//根节点HTML的字体大小初始化
resizeRoot();
window.onresize = function(){
resizeRoot();
};
</script>
원리는 실제로 매우 간단합니다. 즉, 루트 노드 HTML을 다음과 같이 계산합니다. 다른 화면 font-size에 적용한 다음 루트 노드 html의 font-size을 기준으로 rem 계산 원리를 사용하여 다양한 요소의 크기, 간격 등을 실현합니다.
그런 js를 사용하여 판단할 필요가 없다고 말하는 사람들도 있습니다. 실제로 CSS3를 사용하는 것도 가능합니다. 너무 활동적이어서 @media screen대처하기가 좀 부담스러운 것 같아요. media screen
