快捷導(dǎo)航

JS如何實(shí)現(xiàn)封裝列表右滑動(dòng)刪除收藏按鈕

更新時(shí)間：2020年07月23日 11:54:24 作者：Tom最好的朋友是Jerry

這篇文章主要介紹了JS如何實(shí)現(xiàn)封裝列表右滑動(dòng)刪除收藏按鈕,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

　　列表右滑動(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: