小程序向左滑动删除

上一个小程序的项目里面做过这个功能，当时没有记录下来，今天特意做了一个小的demo放在了github上面，下次在开发中遇到的话就可以直接拿下来代码复用了。效果很简单，类似于微信扣扣删除聊天栏的效果，想左滑动，出现删除按钮，点击即可删除。

github地址：https://github.com/wangxiaoting666/swipeleft-delete

 

wxml:

<!--index.wxml-->
<view class="container">
  <scroll-view style='height:{
  {height}}px;' scroll-y='{
  {scrollY}}' class='msg-list' bindscroll='onScroll'>
    <view wx:for="{
  {msgList}}" wx:key="id" class='msg-item' animation='{
  {item.wrapAnimation}}'>
      <view id='{
  {item.id}}' class='msg' animation='{
  {item.animation}}' bindtouchstart='ontouchstart' bindtouchmove='ontouchmove' bindtouchend='ontouchend'>
        <image class='header-img' src="{
  {item.headerImg}}"></image>
        <text class='user-name'>{
  {item.carid}}</text>
        <text class='msg-text'>{
  {item.msgText}}</text>
        <image class='site-img' src="{
  {item.siteImg}}"></image>
      </view>
      <view class='msg-menu'>
        <view id='{
  {item.id}}' class='menu-delete' bindtap='onDeleteMsgTap' bindlongtap='onDeleteMsgLongtap'>
          删除
        </view>
        <view id='{
  {item.id}}' class='menu-mark' bindtap='onMarkMsgTap' bindlongtap='onMarkMsgLongtap'>
          试驾
        </view>
      </view>
    </view>
  </scroll-view>
</view>

wxss: