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

發(fā)布時(shí)間：2020-07-23 14:00:28 來(lái)源：億速云閱讀：258 作者：小豬欄目：開(kāi)發(fā)技術(shù)

這篇文章主要講解了JS實(shí)現(xiàn)封裝列表右滑動(dòng)刪除收藏按鈕的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

前言

　　列表右滑動(dòng)展示刪除和收藏按鈕就類似微信或者美團(tuán)餓了嗎的列表，右滑動(dòng)出現(xiàn)指定的按鈕功能；

　　本來(lái)我是想把前幾年支付寶的一個(gè)機(jī)試題拿來(lái)講，奈何我記不太清題目，也找不到當(dāng)時(shí)做的題了，所以只好將就一下那這個(gè)案例來(lái)講解，其實(shí)解題思路大致是一樣的，畢竟作為程序員最重要的不是會(huì)多少框架和會(huì)用api用的多熟練，設(shè)計(jì)思路才是最重要！

案例

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

　　這個(gè)界面相信大家都非常熟悉，很多時(shí)候一些封裝好的插件可以拿來(lái)用即可實(shí)現(xiàn)這個(gè)功能，算是比較大眾化，不過(guò)為了給不了解原理的小伙伴們講解，所以自己用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>
 <h3 class="title">購(gòu)物車</h3>
 <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毫秒延遲來(lái)凸顯動(dòng)畫效果，實(shí)際不加也可以
 }
 // 這里用jq就不用循環(huán)了，但我懶得引，大家知道就好
 let goods = document.getElementsByClassName("goodsInfo");
 for(let i=0;i<goods.length;i++){
  theIndex === i &#63; goods[i].classList.add("open") : goods[i].classList.remove("open");
 };
 // console.log(moveX,moveY);
}

function touchend(){
 isStop = false;
}

看完上述內(nèi)容，是不是對(duì)JS實(shí)現(xiàn)封裝列表右滑動(dòng)刪除收藏按鈕的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽