微信小程序實現(xiàn)滑動刪除效果

更新時間：2017年05月19日 11:46:53 作者：東邊的小山

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)滑動刪除效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最初打算使用scroll-view實現(xiàn)，效果好、流暢、有慣性滑動，但由于滾動條沒法去掉、無法實現(xiàn)上下層的幀布局，最終放棄了。

還是自己寫個吧，利用手勢事件。遺憾的是小程序中目前沒有像Android中快速滑動事件，所以，要實現(xiàn)慣性滑動是不可能了。

item的布局：

推薦小程序優(yōu)先使用flex布局，完全夠用。這也是微信推薦的。

<view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTeam.id}}" class="item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{cardTeam.right}}px"> 
    <image class="img" src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" mode="scaleToFill"></image> 
    <view class="number-wrapper"> 
     <text class="name">{{cardTeam.name}}</text> 
     <view class="count-wrapper"> 
      <view class="decrease-btn">-</view> 
      <text class="count">1</text> 
      <view class="increase-btn">+</view> 
     </view> 
     <view class="price-wrapper"> 
      <text class="unit">¥</text> 
      <text class="price">99.80</text> 
     </view> 
    </view> 
    <view class="ok"><view class="inner-ok">確定</view></view> 
    <view class="remove" data-id="{{cardTeam.id}}" bindtap="delItem"><view>刪除</view></view> 
   </view>

主要是將刪除按鈕的設為絕對定位(position: absolute)：

.item .remove{ 
  width: 60px; 
  height: 100%; 
  background-color: red; 
  position: absolute; 
  top: 0; 
  right: -60px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

Page({ 
 data: { 
  cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"http://www.see-source.com", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"http://www.see-source.com", "right":0, "startRight":0}] 
 }, 
 drawStart : function(e){ 
   // console.log("drawStart"); 
  var touch = e.touches[0]; 
  startX = touch.clientX; 
  startY = touch.clientY; 
  var cardTeams = this.data.cardTeams; 
  for(var i in cardTeams){ 
    var data = cardTeams[i]; 
    data.startRight = data.right; 
  } 
  key = true; 
 }, 
 drawEnd : function(e){ 
  console.log("drawEnd"); 
  var cardTeams = this.data.cardTeams; 
  for(var i in cardTeams){ 
    var data = cardTeams[i]; 
    if(data.right <= 100/2){ 
      data.right = 0; 
    }else{ 
      data.right = maxRight; 
    } 
  } 
  this.setData({ 
    cardTeams:cardTeams 
  }); 
 }, 
 drawMove : function(e){ 
   //console.log("drawMove"); 
  var self = this; 
  var dataId = e.currentTarget.id; 
  var cardTeams = this.data.cardTeams; 
  if(key){ 
    var touch = e.touches[0]; 
    endX = touch.clientX; 
    endY = touch.clientY; 
    console.log("startX="+startX+" endX="+endX ); 
    if(endX - startX == 0) 
      return ; 
    var res = cardTeams; 
      //從右往左 
 
      if((endX - startX) < 0){ 
        for(var k in res){ 
          var data = res[k]; 
          if(res[k].id == dataId){ 
            var startRight = res[k].startRight; 
            var change = startX - endX; 
            startRight += change; 
            if(startRight > maxRight) 
              startRight = maxRight; 
            res[k].right = startRight; 
          } 
        } 
      }else{//從左往右 
        for(var k in res){ 
          var data = res[k]; 
          if(res[k].id == dataId){ 
            var startRight = res[k].startRight; 
            var change = endX - startX; 
            startRight -= change; 
            if(startRight < 0) 
              startRight = 0; 
            res[k].right = startRight ; 
          } 
        } 
      } 
      self.setData({ 
        cardTeams:cardTeams 
      }); 
           
  } 
 }, 
 //刪除item 
 delItem: function(e){ 
  var dataId = e.target.dataset.id; 
  console.log("刪除"+dataId); 
  var cardTeams = this.data.cardTeams; 
  var newCardTeams = [];  
  for(var i in cardTeams){ 
    var item = cardTeams[i]; 
    if(item.id != dataId){ 
     newCardTeams.push(item); 
    } 
  } 
  this.setData({ 
    cardTeams:newCardTeams 
   }); 
 }, 
 onLoad: function () { 
  console.log('onLoad:'+app.globalData.domain) 
   
 } 
})

drawStart用于記錄手指觸碰時的位置，drawMove記錄手指滑動的位置，兩者的差值就是刪除按鈕的偏移量
drawEnd手指抬起時觸發(fā)，用于設置彈回、攤開效果。目前我的是超過一半自動彈開，不足一半自動收回。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: