基于JS實(shí)現(xiàn)移動(dòng)端向左滑動(dòng)出現(xiàn)刪除按鈕功能
最近在做移動(dòng)端項(xiàng)目時(shí),需要實(shí)現(xiàn)一個(gè)列表頁(yè)面的每一項(xiàng)item向左滑動(dòng)時(shí)出現(xiàn)相應(yīng)的刪除按鈕,本來(lái)想著直接使用zepto的touch.js插件,因?yàn)橹皩?shí)現(xiàn)相同的功能時(shí)用過(guò)這個(gè)插件,當(dāng)時(shí)還挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又開始做這個(gè)功能時(shí),卻發(fā)現(xiàn)這兩個(gè)方法在使用時(shí)毫無(wú)效果,一點(diǎn)反應(yīng)都沒(méi)有。上網(wǎng)查資料,又下載了最新版本的zepto和touch.js,都沒(méi)有用,也不知為什么?所以就棄用了這個(gè)插件。
下面是我后來(lái)實(shí)現(xiàn)后的代碼,其實(shí)就是用了原生js的touch事件,再結(jié)合觸摸點(diǎn)的坐標(biāo)來(lái)判斷左滑和右滑,
<!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> //計(jì)算根節(jié)點(diǎn)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é)點(diǎn)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; // 左右滑動(dòng) 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; } // 上下滑動(dòng) if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) { swipeX = false; } }); } </script> </body> </html>
也許大家也注意到了,在頁(yè)面最開始部分加入了原生js對(duì)移動(dòng)端自適應(yīng)的實(shí)現(xiàn),主要為了方便移動(dòng)端頁(yè)面在不同尺寸屏幕上的更好的展現(xiàn),也是為了在誤差很小的情況下能更好的將設(shè)計(jì)稿近乎完美的呈現(xiàn)在不同尺寸的屏幕上,主要使用到的單位是rem。
移動(dòng)端自適應(yīng)js
<script> //計(jì)算根節(jié)點(diǎn)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é)點(diǎn)HTML的字體大小初始化 resizeRoot(); window.onresize = function(){ resizeRoot(); }; </script>
原理其實(shí)很簡(jiǎn)單,就是根據(jù)不同屏幕來(lái)計(jì)算根節(jié)點(diǎn)html的font-size
,再利用rem相對(duì)于根節(jié)點(diǎn)html的font-size
來(lái)計(jì)算的原理來(lái)實(shí)現(xiàn)不同元素的大小、間距等。
也有人說(shuō)其實(shí)不用這樣的js來(lái)判斷,直接用css3的響應(yīng)式@media screen
也可以,其實(shí)我認(rèn)為在各種尺寸的安卓屏幕如此活躍的當(dāng)下,@media screen
處理起來(lái)就顯得有些力不從心了。
效果圖如下:
附下源碼下載:
以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)移動(dòng)端向左滑動(dòng)出現(xiàn)刪除按鈕功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
self.attachevent is not a function的解決方法
今天一個(gè)客戶用chrome瀏覽器訪問(wèn)網(wǎng)站,他的網(wǎng)站js提示self.attachevent is not a function,這個(gè)問(wèn)題就是這個(gè)瀏覽器不支持attachevent,可以通過(guò)如下方法解決了,分享一下,需要的朋友可以參考下2017-04-04webpack進(jìn)階——緩存與獨(dú)立打包的用法
本篇文章主要介紹了webpack進(jìn)階——緩存與獨(dú)立打包的用法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08js實(shí)現(xiàn)1,2,3,5數(shù)字按照概率生成
這篇文章主要介紹了js實(shí)現(xiàn)1,2,3,5數(shù)字按照概率生成,需要的朋友可以參考下2017-09-09JavaScript逐點(diǎn)突破系列之this是什么
本章將專門介紹與執(zhí)行上下文創(chuàng)建階段直接相關(guān)的最后一個(gè)細(xì)節(jié)——this是什么?以及它的指向到底是什么,感興趣的朋友跟隨小編一起看看吧2021-04-04js數(shù)組刪除問(wèn)題(splice和delete的用法)
這篇文章主要介紹了js數(shù)組刪除問(wèn)題(splice和delete的用法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02解決JavaScript中0.1+0.2不等于0.3問(wèn)題
這篇文章主要介紹了解決JavaScript中0.1+0.2不等于0.3問(wèn)題,需要的朋友可以參考下2018-10-10JS實(shí)現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法(兼容IE和Firefox)
這篇文章主要介紹了JS實(shí)現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法,可實(shí)現(xiàn)文本與圖片的插入功能,并兼容IE和Firefox瀏覽器,需要的朋友可以參考下2016-06-06基于Bootstrap里面的Button dropdown打造自定義select
這篇文章主要介紹了基于Bootstrap里面的Button dropdown打造自定義select的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05