溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了JS實現封裝列表右滑動刪除收藏按鈕的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
前言
列表右滑動展示刪除和收藏按鈕就類似微信或者美團餓了嗎的列表，右滑動出現指定的按鈕功能；
本來我是想把前幾年支付寶的一個機試題拿來講，奈何我記不太清題目，也找不到當時做的題了，所以只好將就一下那這個案例來講解，其實解題思路大致是一樣的，畢竟作為程序員最重要的不是會多少框架和會用api用的多熟練，設計思路才是最重要！
案例
這個界面相信大家都非常熟悉，很多時候一些封裝好的插件可以拿來用即可實現這個功能，算是比較大眾化，不過為了給不了解原理的小伙伴們講解，所以自己用dom手寫了一個，思路如下：
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>支付寶前端機試題</title> <link rel="stylesheet" href="css/index.css" rel="external nofollow" > <script src="js/index.js"></script> </head> <body> <h3 class="title">購物車</h3> <section class="shoppingList"></section> </body> </html>
JS部分
let initXY = [0,0];//記錄移動的坐標
let isStop = false;//記錄是否禁止滑動
let oldIndex = null;//記錄舊的下標
let theIndex = null;//記錄新的下標
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;//如果禁止滑動或者滑動的距離小于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);//設置150毫秒延遲來凸顯動畫效果，實際不加也可以
}
// 這里用jq就不用循環了，但我懶得引，大家知道就好
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;
}看完上述內容，是不是對JS實現封裝列表右滑動刪除收藏按鈕的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
