JS如何實(shí)現(xiàn)封裝列表右滑動(dòng)刪除收藏按鈕
前言
列表右滑動(dòng)展示刪除和收藏按鈕就類似微信或者美團(tuán)餓了嗎的列表,右滑動(dòng)出現(xiàn)指定的按鈕功能;
本來我是想把前幾年支付寶的一個(gè)機(jī)試題拿來講,奈何我記不太清題目,也找不到當(dāng)時(shí)做的題了,所以只好將就一下那這個(gè)案例來講解,其實(shí)解題思路大致是一樣的,畢竟作為程序員最重要的不是會(huì)多少框架和會(huì)用api用的多熟練,設(shè)計(jì)思路才是最重要!
案例
這個(gè)界面相信大家都非常熟悉,很多時(shí)候一些封裝好的插件可以拿來用即可實(shí)現(xiàn)這個(gè)功能,算是比較大眾化,不過為了給不了解原理的小伙伴們講解,所以自己用dom手寫了一個(gè),思路如下:
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>支付寶前端機(jī)試題</title> <link rel="stylesheet" href="css/index.css" rel="external nofollow" > <script src="js/index.js"></script> </head> <body> <h2 class="title">購物車</h2> <section class="shoppingList"></section> </body> </html>
JS部分
let initXY = [0,0];//記錄移動(dòng)的坐標(biāo) let isStop = false;//記錄是否禁止滑動(dòng) let oldIndex = null;//記錄舊的下標(biāo) let theIndex = null;//記錄新的下標(biāo) function touchstart(event,index){ if(event.touches.length > 1) { isStop = true; return; } oldIndex = theIndex; theIndex = null; initXY = [event.touches[0].pageX,event.touches[0].pageY]; // console.log(initXY); } function touchmove(event,index){ if(event.touches.length > 1) return; let moveX = event.touches[0].pageX - initXY[0]; let moveY = event.touches[0].pageY - initXY[1]; if(isStop || Math.abs(moveX) < 5) return;//如果禁止滑動(dòng)或者滑動(dòng)的距離小于5就返回 if(Math.abs(moveY) > Math.abs(moveX)){ isStop = true; return; } if(moveX<0){ theIndex = index; isStop = true; }else if(theIndex && oldIndex === theIndex){ oldIndex =index; theIndex = null; isStop = true; setTimeout(()=>{oldIndex=null;},150);//設(shè)置150毫秒延遲來凸顯動(dòng)畫效果,實(shí)際不加也可以 } // 這里用jq就不用循環(huán)了,但我懶得引,大家知道就好 let goods = document.getElementsByClassName("goodsInfo"); for(let i=0;i<goods.length;i++){ theIndex === i ? goods[i].classList.add("open") : goods[i].classList.remove("open"); }; // console.log(moveX,moveY); } function touchend(){ isStop = false; }
總結(jié)
實(shí)現(xiàn)的方法無非就是判斷觸碰的時(shí)候移動(dòng)的坐標(biāo)值再加上動(dòng)畫,有興趣看源代碼的小伙伴可以到github下載:
https://github.com/13632756286/Sliding-menu
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript支持的最大遞歸調(diào)用次數(shù)分析
這篇文章主要介紹了JavaScript支持的最大遞歸調(diào)用次數(shù)分析,也稱JavaScript支持的最大堆棧數(shù)量,需要的朋友可以參考下2014-06-06javascript之循環(huán)停頓上下滾動(dòng)
javascript之循環(huán)停頓上下滾動(dòng)...2007-08-08js動(dòng)態(tài)給table添加/刪除tr的方法
這篇文章介紹了js動(dòng)態(tài)給table添加/刪除tr的方法,有需要的朋友可以參考一下2013-08-08微信小程序通過一個(gè)json實(shí)現(xiàn)分享朋友圈圖片
這篇文章主要給大家介紹了關(guān)于微信小程序通過一個(gè)json實(shí)現(xiàn)分享朋友圈圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09JavaScript模板引擎應(yīng)用場景及實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript模板引擎應(yīng)用場景及實(shí)現(xiàn)原理,結(jié)合實(shí)例形式詳細(xì)分析了javascript模版引擎的具體應(yīng)用場景、實(shí)現(xiàn)原理、相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12JS實(shí)現(xiàn)三個(gè)層重疊點(diǎn)擊互相切換的方法
這篇文章主要介紹了JS實(shí)現(xiàn)三個(gè)層重疊點(diǎn)擊互相切換的方法,涉及JavaScript動(dòng)態(tài)操作頁面定位屬性的相關(guān)技巧,需要的朋友可以參考下2015-10-10