本文主要介紹了基於jQuery的左滑出現刪除按鈕的範例,這裡整理了詳細的程式碼,非常具有實用價值,需要的朋友可以參考下,希望能幫助到大家。
最近在做專案的時候遇到了個需求,在網頁上實現類似於QQ會話清單那樣子的左滑出現刪除按鈕的效果,於是嘗試著寫了一個,寫出來與大家交流分享,大神勿噴。
基本需求
由於我們是在做一個跨平台的APP,裡面部分介面其實就是WebView載入的網頁,因此需要使用網頁實現這樣的效果:往左滑動時,顯示刪除按鈕,再往右滑,隱藏刪除按鈕。
成品範例圖
額,先上圖。下面分別是在PC瀏覽器裡和在Mobile瀏覽器裡的效果。
PC瀏覽器
手機瀏覽器
##實現想法
為了說明我的實作思路,做了兩個圖來輔助說明。 首先,請看圖1。在圖中,我們設定每一行的寬度超過瀏覽器的寬度,而其超出的部分就是放置按鈕的區域。由於超出了瀏覽器的最大寬度,因此按鈕區域此時是不可見的,只能顯示左側的常規資訊部分。 圖1 普通狀態接下來,我們監聽左側常規資訊區域,監聽滑動事件(具體如何監聽先不考慮)。當我們監聽到左滑事件時,我們讓對應行左偏移,讓按鈕顯示出來,同時左側超出的部分被遮擋(請看圖2)。 圖2 左滑狀態關鍵實現方式
對於左滑和右滑,我們透過設定常規訊息區域的marin-left來實現,當設定margin-left為負值時,實現左滑,當再次設定margin-left為0時,實現右滑。完整程式碼
要注意的是,我在測試的時候用的是chrome的普通模式和mobile模擬器模式,發現兩種模式下監聽是不一樣的,因此我寫了兩種監聽,這樣至少有一種會執行。也許有其他更好的適配方法,但不作為此處的重點。當然也歡迎大家賜教。 至於程式碼部分,用了jQuery,其實不用也沒啥問題的,動畫滑動和監聽都可以用純js寫,但是由於這不是這裡的重點,那麼為什麼不用jQuery呢?成功者站在巨人的肩膀上,而且咱也沒有jQuery寫的好(。・`ω´・)2015/11/13更新
#有位同學提出說代碼在QQ手機瀏覽器和Opera手機瀏覽器等中沒有滑動效果,找了一下大概是帖子裡說的原因,於是根據帖子裡的提示以及那位同學的一個大神同學的提示,做了一下修改。主要是在touchmove事件中根據橫縱座標位移來判斷是否阻止預設事件,如下:
#
// 横向位移大于纵向位移,阻止纵向滚动 if (Math.abs(delta.x) > Math.abs(delta.y)) { event.preventDefault(); }
2016/02/25更新
qq_25558115同學提到:「如果再能提供給大家只能有一筆記錄可以左滑, 倘若滑動其他的記錄,則有左滑記錄的要回到原位」。於是進行了簡單實作。主要想法如下:// 用一个变量记录上一次左滑的对象 var lastLeftObj; // 在左滑发生的时候,判定上一个左滑的对象是否存在,若存在,且不是当前被左滑的对象,则将其右滑 // 同时,记录新的左滑对象 // 在右滑发生时,将上一个左滑对象清空 if (左滑) { pressedObj左滑 lastLeftObj && lastLeftObj != pressedObj && lastLeftObj右滑 lastLeftObj = pressedObj; // 记录上一个左滑的对象 } else if (右滑) { pressedObj右滑 lastLeftObj = null; // 清空上一个左滑的对象 }
2016/09/06更新
根據馬燦髮同學提出的bug進行修改:右滑時進行判斷,僅當要右滑的物件(pressedObj)是上一次左滑的物件(lastLeftObj)時才將物件右滑並清空lastLeftObj。
if (pressedObj == lastLeftObj) {...}根據girlyougo同學的提議,加入「在本行以外的其他區域點擊時均重設目前左滑按鈕」的功能。思路為在滑動結束時,判定pressedObj!=lastLeftObj,即可知點擊/滑動的物件為其他物件:
// 点击除当前左滑对象之外的任意其他位置 if (lastLeftObj && pressedObj != lastLeftObj) { $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 }實際上,在新增了上述功能之後,前面提到的bug不存在了。不過此處保留了消除bug的部分程式碼。 更新後的完整程式碼如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>左划出现删除按钮,右滑隐藏</title> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { // 设定每一行的宽度=屏幕宽度+按钮宽度 $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width()); // 设定常规信息区域宽度=屏幕宽度 $(".line-normal-wrapper").width($(".line-wrapper").width()); // 设定文字部分宽度(为了实现文字过长时在末尾显示...) $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280); // 获取所有行,对每一行设置监听 var lines = $(".line-normal-wrapper"); var len = lines.length; var lastX, lastXForMobile; // 用于记录被按下的对象 var pressedObj; // 当前左滑的对象 var lastLeftObj; // 上一个左滑的对象 // 用于记录按下的点 var start; // 网页在移动端运行时的监听 for (var i = 0; i < len; ++i) { lines[i].addEventListener('touchstart', function(e){ lastXForMobile = e.changedTouches[0].pageX; pressedObj = this; // 记录被按下的对象 // 记录开始按下时的点 var touches = event.touches[0]; start = { x: touches.pageX, // 横坐标 y: touches.pageY // 纵坐标 }; }); lines[i].addEventListener('touchmove',function(e){ // 计算划动过程中x和y的变化量 var touches = event.touches[0]; delta = { x: touches.pageX - start.x, y: touches.pageY - start.y }; // 横向位移大于纵向位移,阻止纵向滚动 if (Math.abs(delta.x) > Math.abs(delta.y)) { event.preventDefault(); } }); lines[i].addEventListener('touchend', function(e){ if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置 $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 } var diffX = e.changedTouches[0].pageX - lastXForMobile; if (diffX < -150) { $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑 lastLeftObj && lastLeftObj != pressedObj && $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑 lastLeftObj = pressedObj; // 记录上一个左滑的对象 } else if (diffX > 150) { if (pressedObj == lastLeftObj) { $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 } } }); } // 网页在PC浏览器中运行时的监听 for (var i = 0; i < len; ++i) { $(lines[i]).bind('mousedown', function(e){ lastX = e.clientX; pressedObj = this; // 记录被按下的对象 }); $(lines[i]).bind('mouseup', function(e){ if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置 $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 } var diffX = e.clientX - lastX; if (diffX < -150) { $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑 lastLeftObj && lastLeftObj != pressedObj && $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑 lastLeftObj = pressedObj; // 记录上一个左滑的对象 } else if (diffX > 150) { if (pressedObj == lastLeftObj) { $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 } } }); } }); </script> <style type="text/css"> * { margin: 0; padding: 0; } .line-wrapper { width: 100%; height: 144px; overflow: hidden; font-size: 28px; border-bottom: 1px solid #aaa; } .line-scroll-wrapper { white-space: nowrap; height: 144px; clear: both; } .line-btn-delete { float: left; width: 132px; height: 144px; } .line-btn-delete button { width: 100%; height: 100%; background: red; border: none; font-size: 24px; font-family: 'Microsoft Yahei'; color: #fff; } .line-normal-wrapper { display: inline-block; line-height: 100px; float: left; padding-top: 10px; padding-bottom: 10px; } .line-normal-icon-wrapper { float: right; width: 120px; height: 120px; margin-right: 12px; } .line-normal-icon-wrapper img { width: 120px; height: 120px; } .line-normal-avatar-wrapper { width: 100px; height: 124px; float: left; margin-left: 12px; } .line-normal-avatar-wrapper img { width: 92px; height: 92px; border-radius: 60px; } .line-normal-left-wrapper { float: left; overflow: hidden; } .line-normal-info-wrapper { float: left; margin-left: 10px; } .line-normal-user-name { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; } .line-normal-msg { height: 28px; line-height: 28px; overflow:hidden; text-overflow:ellipsis; color: #4e4e4e; margin-top: 11px; } .line-normal-time { height: 28px; line-height: 28px; color: #999; margin-top: 11px; } </style> </head> <body> <p class="line-wrapper"> <p class="line-scroll-wrapper"> <p class="line-normal-wrapper"> <p class="line-normal-left-wrapper"> <p class="line-normal-avatar-wrapper"><img src="1.jpg" /></p> <p class="line-normal-info-wrapper"> <p class="line-normal-user-name">蜡笔小新</p> <p class="line-normal-msg">在同行的小伙伴中提到了你</p> <p class="line-normal-time">1分钟前</p> </p> </p> <p class="line-normal-icon-wrapper"><img src="5.jpg"/></p> </p> <p class="line-btn-delete"><button>删除</button></p> </p> </p> <p class="line-wrapper"> <p class="line-scroll-wrapper"> <p class="line-normal-wrapper"> <p class="line-normal-left-wrapper"> <p class="line-normal-avatar-wrapper"><img src="2.jpg" /></p> <p class="line-normal-info-wrapper"> <p class="line-normal-user-name">乔巴</p> <p class="line-normal-msg">你看不到我哦</p> <p class="line-normal-time">1分钟前</p> </p> </p> <p class="line-normal-icon-wrapper"><img src="6.jpg"/></p> </p> <p class="line-btn-delete"><button>删除</button></p> </p> </p> <p class="line-wrapper"> <p class="line-scroll-wrapper"> <p class="line-normal-wrapper"> <p class="line-normal-left-wrapper"> <p class="line-normal-avatar-wrapper"><img src="3.jpg" /></p> <p class="line-normal-info-wrapper"> <p class="line-normal-user-name">贱行贱远</p> <p class="line-normal-msg">回忆里想起模糊的小时候,云朵漂浮在蓝蓝的天空,那时的你说,要和我手牵手,一起走到时间的尽头</p> <p class="line-normal-time">1分钟前</p> </p> </p> <p class="line-normal-icon-wrapper"><img src="7.jpg"/></p> </p> <p class="line-btn-delete"><button>删除</button></p> </p> </p> <p class="line-wrapper"> <p class="line-scroll-wrapper"> <p class="line-normal-wrapper"> <p class="line-normal-left-wrapper"> <p class="line-normal-avatar-wrapper"><img src="4.png" /></p> <p class="line-normal-info-wrapper"> <p class="line-normal-user-name">小黄人</p> <p class="line-normal-msg">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</p> <p class="line-normal-time">1分钟前</p> </p> </p> <p class="line-normal-icon-wrapper"><img src="8.jpg"/></p> </p> <p class="line-btn-delete"><button>删除</button></p> </p> </p> </body> </html>
##
程式碼還比較粗糙,存在著很多bug,也有些地方不是那麼絕對。例如當我按下時是在第一筆記錄,然後抬起時是在第二筆記錄,那麼這時候滑動將是第一筆記錄。但是這個看具體需求了,如果你覺得滑動的對象應該以按下去時的對象為準的話,那就不管在哪抬起都滑動那個按下時的對象;如果你覺得滑動的對象應該是抬起時的對象,那也沒問題,或是你覺得按下和抬起時不是同一個對象就不滑動任何對像那也行。總之,看需求。
相關推薦:
以上是jQuery實作左滑出現刪除按鈕方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!