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

 

左滑删除这个效果在很多移动端APP上都有体现，很多用户也都养成了这样的习惯，但是在开放小程序过程中，我发现小程序本身并没有提供这个功能，所以只好自己动手，实现这个左滑删除的效果了。

实现效果
1.列表中侧滑删除
2.删除不同时存在
3.scrollview上下滑动与侧滑删除不影响

 

实现方式
运用了WXML中的事件
事件->小程序API

 

 

wxml代码

<scroll-view scroll-y="{{isScroll}}" style='height:{{windowHeight}}px'>
    <block wx:key="item" wx:for="{{data}}">
    <view data-index='{{index}}' class="order-item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{item.right}}rpx">
        <view class="content">{{item.content}}</view>
        <view class="remove" bindtap="delItem">删除 </view>
    </view>
    </block>
</scroll-view>

js代码

Page({
  data: {
    delBtnWidth:160,
    data: [{ content: "1", right: 0 }, { content: "2", right: 0 }, { content: "3", right: 0 }, { content: "4", right: 0 }, { content: "5", right: 0 }, { content: "6", right: 0 }, { content: "7", right: 0 }, { content: "8", right: 0 }, { content: "9", right: 0 }, { content: "10",  right: 0 }],
    isScroll:true,
    windowHeight:0,
  },
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight
        });
      }
    });
  },
  drawStart: function (e) {
    // console.log("drawStart");  
    var touch = e.touches[0]

    for(var index in this.data.data) {
      var item = this.data.data[index]
      item.right = 0
    }
    this.setData({
      data: this.data.data,
      startX: touch.clientX,
    })

  },
  drawMove: function (e) {
    var touch = e.touches[0]
    var item = this.data.data[e.currentTarget.dataset.index]
    var disX = this.data.startX - touch.clientX
    
    if (disX >= 20) {
      if (disX > this.data.delBtnWidth) {
        disX = this.data.delBtnWidth
      }
      item.right = disX
      this.setData({
        isScroll: false,
        data: this.data.data
      })
    } else {
      item.right = 0
      this.setData({
        isScroll: true,
        data: this.data.data
      })
    }
  },  
  drawEnd: function (e) {
    var item = this.data.data[e.currentTarget.dataset.index]
    if (item.right >= this.data.delBtnWidth/2) {
      item.right = this.data.delBtnWidth
      this.setData({
        isScroll: true,
        data: this.data.data,
      })
    } else {
      item.right = 0
      this.setData({
        isScroll: true,
        data: this.data.data,
      })
    }
  },
  
  delItem: function (e) {

  }
})

wxss代码

.order-item {
  height: 240rpx;
  width: 100%;
  display: flex;
  position: relative;
}

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

 

微信公号搜索：遇见一朵小花。（或扫描二维码）找我玩啊只讲对你有用的东西。

也常常给粉丝寄出自己看完闲置的好书，喜欢看书的可以来看看，

还不定期在公众号请大家喝奶茶！

想与我聊聊或者有什么问题都可以在公众号找到我。

等你哟~