原生H5頁面模擬APP左側滑動刪除效果


話不多說,往左側滑動,顯示刪除,我們先來看一下效果圖:如下:

 

這個布局我就不多說,反正就是一行ul,li,

class名“item”

js代碼如下:

$(".item").on("swipeleft",function(){
  $(this).addClass('selected').parents(".touch").siblings().find(".item").removeClass('selected');
  $(this).find("a.remove").on("click",function(){
  var touchId = $(this).parents(".touch").attr("id");
  //執行刪除效果
  $("#"+touchId).css("border","0");
   $("#"+touchId).stop().animate({
    height:"0",
    margin:"0"
    },300,function(){
    $(this).remove();
  })
})
}).on("swiperight",function(){
  $(this).parents(".touch").find(".item").removeClass('selected');
})

其中要增加一下zepto.min.js調用,就能達到app左側滑動刪除效果左.

其用有更好的優化代碼,請留言,一同學習


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM