欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实现滑动删除效果

程序员文章站 2022-06-12 23:06:47
最初打算使用scroll-view实现,效果好、流畅、有惯性滑动,但由于滚动条没法去掉、无法实现上下层的帧布局,最终放弃了。 还是自己写个吧,利用手势事件。遗憾的是小程序...

最初打算使用scroll-view实现,效果好、流畅、有惯性滑动,但由于滚动条没法去掉、无法实现上下层的帧布局,最终放弃了。

还是自己写个吧,利用手势事件。遗憾的是小程序中目前没有像android中快速滑动事件,所以,要实现惯性滑动是不可能了。

微信小程序实现滑动删除效果

item的布局:

推荐小程序优先使用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手指抬起时触发,用于设置弹回、摊开效果。目前我的是超过一半自动弹开,不足一半自动收回。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。