基于JS實現(xiàn)移動端向左滑動出現(xiàn)刪除按鈕功能
最近在做移動端項目時,需要實現(xiàn)一個列表頁面的每一項item向左滑動時出現(xiàn)相應(yīng)的刪除按鈕,本來想著直接使用zepto的touch.js插件,因為之前實現(xiàn)相同的功能時用過這個插件,當(dāng)時還挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又開始做這個功能時,卻發(fā)現(xiàn)這兩個方法在使用時毫無效果,一點反應(yīng)都沒有。上網(wǎng)查資料,又下載了最新版本的zepto和touch.js,都沒有用,也不知為什么?所以就棄用了這個插件。
下面是我后來實現(xiàn)后的代碼,其實就是用了原生js的touch事件,再結(jié)合觸摸點的坐標(biāo)來判斷左滑和右滑,
<!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側(cè)滑顯示刪除按鈕</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> //計算根節(jié)點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"; } //根節(jié)點HTML的字體大小初始化 resizeRoot(); window.onresize = function(){ resizeRoot(); }; </script> </head> <body> <section> <div class="list"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >側(cè)滑顯示刪除按鈕1<i>刪除</i></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >側(cè)滑顯示刪除按鈕2<i>刪除</i></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >側(cè)滑顯示刪除按鈕3<i>刪除</i></a></li> </ul> </div> <script> //側(cè)滑顯示刪除按鈕 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對移動端自適應(yīng)的實現(xiàn),主要為了方便移動端頁面在不同尺寸屏幕上的更好的展現(xiàn),也是為了在誤差很小的情況下能更好的將設(shè)計稿近乎完美的呈現(xiàn)在不同尺寸的屏幕上,主要使用到的單位是rem。
移動端自適應(yīng)js
<script> //計算根節(jié)點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"; } //根節(jié)點HTML的字體大小初始化 resizeRoot(); window.onresize = function(){ resizeRoot(); }; </script>
原理其實很簡單,就是根據(jù)不同屏幕來計算根節(jié)點html的font-size
,再利用rem相對于根節(jié)點html的font-size
來計算的原理來實現(xiàn)不同元素的大小、間距等。
也有人說其實不用這樣的js來判斷,直接用css3的響應(yīng)式@media screen
也可以,其實我認(rèn)為在各種尺寸的安卓屏幕如此活躍的當(dāng)下,@media screen
處理起來就顯得有些力不從心了。
效果圖如下:
附下源碼下載:
以上所述是小編給大家介紹的基于JS實現(xiàn)移動端向左滑動出現(xiàn)刪除按鈕功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
self.attachevent is not a function的解決方法
今天一個客戶用chrome瀏覽器訪問網(wǎng)站,他的網(wǎng)站js提示self.attachevent is not a function,這個問題就是這個瀏覽器不支持attachevent,可以通過如下方法解決了,分享一下,需要的朋友可以參考下2017-04-04js實現(xiàn)1,2,3,5數(shù)字按照概率生成
這篇文章主要介紹了js實現(xiàn)1,2,3,5數(shù)字按照概率生成,需要的朋友可以參考下2017-09-09js數(shù)組刪除問題(splice和delete的用法)
這篇文章主要介紹了js數(shù)組刪除問題(splice和delete的用法),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02JS實現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法(兼容IE和Firefox)
這篇文章主要介紹了JS實現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法,可實現(xiàn)文本與圖片的插入功能,并兼容IE和Firefox瀏覽器,需要的朋友可以參考下2016-06-06基于Bootstrap里面的Button dropdown打造自定義select
這篇文章主要介紹了基于Bootstrap里面的Button dropdown打造自定義select的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-05-05