최근 모바일 프로젝트를 작업할 때 목록 페이지의 각 항목을 왼쪽으로 밀면 나타나는 해당 삭제 버튼을 구현해야 했습니다. 실제로 이 기능을 구현하는 것은 매우 간단합니다. 이번 글에서는 주로 모바일 단말기를 왼쪽으로 슬라이드 했을 때 나타나는 삭제 버튼의 구현을 js 기반으로 소개합니다. 필요하신 분들은 참고하시면 됩니다
최근 모바일 단말기 프로젝트를 진행하면서 깨달아야 할 부분이 있습니다. 목록 페이지의 각 항목이 왼쪽으로 슬라이드되면 해당 디스플레이가 나타납니다. 삭제 버튼의 경우 원래는 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의 글꼴 크기
를 계산한 다음 사용합니다. 루트 노드를 비교하기 위한 rem html font-size
는 다양한 요소의 크기, 간격 등을 계산하는 데 사용됩니다. font-size
,再利用rem相对于根节点html的font-size
来计算的原理来实现不同元素的大小、间距等。
也有人说其实不用这样的js来判断,直接用css3的响应式@media screen
也可以,其实我认为在各种尺寸的安卓屏幕如此活跃的当下,@media screen
그런 js를 사용하여 판단할 필요가 없다고 말하는 사람들도 있습니다. 실제로 CSS3의 반응형 @미디어 화면
을 직접 사용할 수도 있습니다. 실제로 이제는 다양한 크기의 Android 화면이 있다고 생각합니다. 너무 활동적이어서 @미디어 화면이 처리하기에는 약간 힘이 없는 것 같습니다.
위 내용은 모두의 학습에 도움이 되기를 바랍니다.
관련 권장 사항:
js를 사용하여 가로 드래그 앤 드롭 탐색 모음 기능을 구현하는 방법
🎜🎜
위 내용은 JS는 모바일 단말기에서 왼쪽으로 슬라이드하여 삭제 버튼을 표시하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!