微信小程序左滑刪除功能開發案例

sydMobile 發布于2019-08-23 13:02 / 3310人閱讀

摘要：當我們手指向左滑動時，容器向左移動此時從容器之后顯示出來換句話說我們喜歡容器蓋住，使默認在上方。接著我們給元素添加，這樣它就能獲得移動的距離。詳細案例請搜索微信小程序魔都源碼地址

直接進入正題，我們需要做的就是通過手指滑動列表項后，右側出現刪除；
比如說像這樣：

向左邊滑動后出現如下的效果：

開始擼代碼～
假設我們有N個列表項來自一個數組list，先確定基本的結構


    
        {{item}}
        刪除

在item中分別放入wrap作為顯示項目內容的容器，與delete刪除按鈕的容器。
當我們手指向左滑動wrap時，wrap容器向左移動；此時delete從wrap容器之后顯示出來；換句話說我們喜歡wrap容器蓋住delete，使wrap默認在delete上方。
沒錯，我們用樣式來實現效果。

.item{ position:relative; }
.wrap{ 
  position:absolute;z-index:2; top:0;left:0;
  backgorund:#fff;width:100%;height:100%;
}
.delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}

好了，這些我們需要的核心樣式，為了wrap能100%蓋住delete，我們給到它寬高都是百分之百，并且填充背景顏色是必然的，至于要怎么美化可自行添加需要的樣式。
基本的結構就到這里了，接下來我們為wrap添加觸摸事件；

{{item}}

我們綁定了三個觸摸事件，分別是，觸摸開始，觸摸時移動以及觸摸結束。
同時有個wrap添加了data-index="{{index}}" 這樣我們就可以確定當前觸摸的列表項是哪一個。
接著我們來為他們添加對應的方法。

  touchstart:function(e){
    this.setData({
      index: e.currentTarget.dataset.index,
      Mstart: e.changedTouches[0].pageX
    });
  }

通過touchstart方法我們將當前觸發事件元素的索引保存到index，并且獲得當前手指觸摸的坐標位置e.changedTouches[0].pageX；

e.changedTouches[0].pageX
屏幕的左上角的坐標為(0,0)，離左上角的距離越大pageX的值也越大。

下一步，當我們移動手指向左滑動時：

  touchmove: function (e) {
    //列表項數組
    let list = this.data.list;
    //手指在屏幕上移動的距離
    //移動距離 = 觸摸的位置 - 移動后的觸摸位置
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    // 這里就使用到我們之前記錄的索引index
    //比如你滑動第一個列表項index就是0，第二個列表項就是1，···
    //通過index我們就可以很準確的獲得當前觸發的元素，當然我們需要在事前為數組list的每一項元素添加x屬性
    list[this.data.index].x = move > 0 ? -move : 0;
    this.setData({
      list: list
    });
  }

當移動后的觸摸位置小于最初觸發的位置時，說明手指是向左滑動，因為pageX越小就越向屏幕邊緣靠近；這個時候move就是wrap容器需要向左移動的距離。
我們重寫list[this.data.index].x的值，并且將原有的list覆蓋，這樣我們在滑動的時候就能實時的看到元素跟隨手指移動的效果；
這個時候我們可以發現，我們一直往左邊移動，wrap元素就會被推到屏幕的邊緣；這很明顯不是我們想要的效果，我們希望滑動到一定距離后就停止滑動，于是我們為其添加最后一個方法；

  touchend: function (e) {
    let list = this.data.list;
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    list[this.data.index].x = move > 100 ? -180 : 0;
    this.setData({
      list: list
    });
  },

我們看到這個方法唯一的不同的地方是這一行

list[this.data.index].x = move > 100 ? -180 : 0

意思是當手指離開元素時，如果移動的距離大于100，那么元素將自動向左移動到180的距離，如果小于100那么元素將向右恢復。
接著我們給wrap元素添加style，這樣它就能獲得移動的距離x。
至于為什么要移動距離要除以2，這個跟小程序使用rpx單位有關系；
之前我們寫100，-180是像素px，需要換算成rpx；
微信小程序開發尺寸單位文檔

設備    rpx換算px (屏幕寬度/750)    px換算rpx (750/屏幕寬度)
iPhone5,1rpx = 0.42px,1px = 2.34rpx
iPhone6,1rpx = 0.5px,1px = 2rpx
iPhone6 Plus,1rpx = 0.552px,1px = 1.81rpx

我們看到基本是2倍的比例；

{{item}}

最后我們使用樣式為wrap元素添加過渡效果就基本完成了。

詳細案例請搜索微信小程序：52魔都

源碼地址：https://github.com/749264345/...

云服務器 GPU云服務器微信小程序案例微信小程序功能微信小程序的功能微信小程序有什么功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99171.html

微信小程序——商城篇

摘要：微信小程序之跳轉在進入商品詳情頁以后，點擊左下角的圖標原應該跳轉到首頁，但是一直點也不跳，而且也不報錯。放下效果圖微信小程序購物車購物車頁面邏輯的話，要按業務需求來。前言隨著wepy和mpvue的出現及流行，開發小程序變的越來越便捷和強大，作為基佬社區的一份子，我們都需要把自己遇到的問題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫的不足的地方，請各...

k00baa 2019-08-26 12:01 評論0 收藏0
小程序開發：左滑刪除

摘要：，上層使用絕對定位，我們操縱屬性的值來實現像左移動。，我們通過微信小程序提供的對象和個有關手指觸摸的函數，，來實現隨手指移動。省略數據刪除部分中根據綁定的事件觸發刪除按鈕，用戶點擊刪除，發送請求，根據返回值對用戶進行反饋。導語首先聲明兩點：思路以及代碼，是根據資料進行一些修改以及補充，原文地址在此下面的只是 demo，各位根據自己的需要進行修改完善實現的思路摘抄如下 1...

missonce 2019-07-01 11:14 評論0 收藏0
小程序左滑刪除如何實現

摘要：微信小程序如何實現左滑刪除的功能呢左滑刪除組件，基礎庫開始支持，如下圖所示。微信小程序如何實現左滑刪除的功能呢 https://developers.weixin.qq.... https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html Slideview左滑刪除組件，基礎庫 2.4.4 ...

ChristmasBoy 2019-08-26 18:42 評論0 收藏0
寫一個微信小程序側滑刪除組件

摘要：今天就遇到一個需要，刪除操作，按照微信的交互做一個。剩下的可以看看這個代碼，微信小程序側滑刪除編輯一些小問題在滑動的時候，貌似最小需要像素才會響應，是不是我的姿勢有點問題。原文閱讀寫一個微信小程序側滑刪除組件背景最近一直在斷斷續續做一個小程序的項目，看起來很小，但一直沒正經做過小程序，所有沒啥積累，什么東西都要自己寫一遍。今天就遇到一個需要，刪除操作，按照微信的交互做一個。向左...

宋華 2019-08-22 18:02 評論0 收藏0
從0到1：微信小程序自選股項目回憶錄

摘要：小程序自選股項目團隊在長達五個月的時間里經歷了太多不為人知的故事，不知通宵了多少個夜晚，只為等待小龍宣布號小程序正式發布的到來。第一次被微信開放平臺開發二組團隊小程序項目團隊當小白鼠各種實驗新特性。。導語：我很喜歡小龍的一句話，微信因你而變。是的，把事情做到極致的時候，這個世界就會因你而變。小程序自選股項目團隊在長達五個月的時間里經歷了太多不為人知的故事，不知通宵了多少個夜晚，只...

feng409 2019-08-20 13:36 評論0 收藏0