微信小程序向左滑动删除操作（类仿微信、QQ）

上一个小程序的项目里面做过这个功能，当时没有记录下来，今天特意做了一个小的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:

/**index.wxss**/

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.msg-item {
  width: 100%;
  height: 150rpx;
  border-bottom: 1rpx solid rgb(233, 233, 233);
  position: relative;
  left: 0;
  top: 0;
  overflow: hidden;
}

.msg {
  position: absolute;
  width: 100%;
  height: 150rpx;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #fff;
}

.header-img {
  position: absolute;
  width: 100rpx;
  height: 100rpx;
  left: 30rpx;
  top: 40rpx;
  border-radius: 10%;
}

.site-img {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  right: 30rpx;
  top: 40rpx;
  border-radius: 10%;
}

.user-name {
  position: absolute;
  left: 150rpx;
  top: 33rpx;
  font-weight: 600;
  font-size: 35rpx;
}

.msg-text {
  position: absolute;
  left: 150rpx;
  bottom: 30rpx;
  font-size: 80%;
  color: rgb(127, 127, 127);
}

.msg-menu {
  position: absolute;
  width: 100%;
  height: 150rpx;
  left: 0;
  top: 0;
  z-index: 0;
}

.menu-delete {
  position: absolute;
  width: 150rpx;
  height: 148rpx;
  top: 1rpx;
  right: 0;
  background-color: rgb(255, 58, 50);
  color: #fff;
  text-align: center;
  line-height: 150rpx;
}

.menu-mark {
  position: absolute;
  width: 200rpx;
  height: 148rpx;
  top: 1rpx;
  right: 150rpx;
  background-color: rgb(200, 199, 205);
  color: #fff;
  text-align: center;
  line-height: 150rpx;
}

/* 底部按钮 */

.Scancode {
  font-size: 39rpx;
  background: rgb(82, 80, 80);
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
  justify-content: center;
  color: #fff;
  border-radius: 0px;
}

.search {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #fff;
  border: 1px solid #c8c8c8;
  position: fixed;
  bottom: 130rpx;
  left: 16rpx;
  display: flex;
  justify-content: center;
  border-radius: 50rpx;
  /* -webkit-box-shadow:3px 3px 3px #c8c8c8 ;
-moz-box-shadow:3px 3px 3px #c8c8c8 ;
box-shadow:3px 3px 3px #c8c8c8 ; */
}

.search .img {
  width: 40rpx;
  height: 40rpx;
  margin-top: 10rpx;
}

.user {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #c8c8c8;
  background: #fff;
  position: fixed;
  bottom: 130rpx;
  right: 16rpx;
  display: flex;
  color: #fff;
  justify-content: center;
  border-radius: 50rpx;
  /* -webkit-box-shadow:3px 3px 3px #c8c8c8 ;
-moz-box-shadow:3px 3px 3px #c8c8c8 ;
box-shadow:3px 3px 3px #c8c8c8 ; */
}

.user .img {
  width: 40rpx;
  height: 40rpx;
  margin-top: 10rpx;
}

js

//index.js
//获取应用实例

var app = getApp()

Page({
  data: {
    msgList:[],
    height:0,
    scrollY:true
  },
  swipeCheckX:35, //激活检测滑动的阈值
  swipeCheckState:0, //0未激活 1激活
  maxMoveLeft:185, //消息列表项最大左滑距离
  correctMoveLeft:175, //显示菜单时的左滑距离
  thresholdMoveLeft: 75,//左滑阈值，超过则显示菜单
  lastShowMsgId:'', //记录上次显示菜单的消息id
  moveX:0,  //记录平移距离
  showState:0, //0 未显示菜单 1显示菜单
  touchStartState:0, // 开始触摸时的状态 0 未显示菜单 1 显示菜单
  swipeDirection:0, //是否触发水平滑动 0:未触发 1:触发水平滑动 2:触发垂直滑动
  onLoad: function() {
    this.pixelRatio = app.data.deviceInfo.pixelRatio;
    var windowHeight = app.data.deviceInfo.windowHeight;  
    var height = windowHeight;
    for (var i = 0; i < 5; i++) {
      var msg = {};
      msg.carid = '' + '沪D086' + i+1;
      msg.msgText = '10801:10001'
      msg.id = 'id-' + i+1;
      msg.headerImg = '../../img/car.png';
      msg.siteImg = '../../img/site.png';
      this.data.msgList.push(msg);
    }
    this.setData({msgList:this.data.msgList, height:height});
  },

  ontouchstart: function(e) {
    if (this.showState === 1) {
      this.touchStartState = 1;
      this.showState = 0;
      this.moveX = 0;
      this.translateXMsgItem(this.lastShowMsgId, 0, 200);
      this.lastShowMsgId = "";
      return;
    }
    this.firstTouchX = e.touches[0].clientX;
    this.firstTouchY = e.touches[0].clientY;
    if (this.firstTouchX > this.swipeCheckX) {
      this.swipeCheckState = 1;
    }
    this.lastMoveTime = e.timeStamp;
  },

  ontouchmove: function(e) {
    if (this.swipeCheckState === 0) {
      return;
    }
    //当开始触摸时有菜单显示时，不处理滑动操作
    if (this.touchStartState === 1) {
      return;
    }
    var moveX = e.touches[0].clientX - this.firstTouchX;
    var moveY = e.touches[0].clientY - this.firstTouchY;
    //已触发垂直滑动，由scroll-view处理滑动操作
    if (this.swipeDirection === 2) {
      return;
    }
    //未触发滑动方向
    if (this.swipeDirection === 0) {
      console.log(Math.abs(moveY));
      //触发垂直操作
      if (Math.abs(moveY) > 4) {
        this.swipeDirection = 2;

        return;
      }
      //触发水平操作
      if (Math.abs(moveX) > 4) {
        this.swipeDirection = 1;
        this.setData({scrollY:false});
      }
      else {
        return;
      }
        
    }
    //禁用垂直滚动
    // if (this.data.scrollY) {
    //   this.setData({scrollY:false});
    // }

    this.lastMoveTime = e.timeStamp;
    //处理边界情况
    if (moveX > 0) {
      moveX = 0;
    }
    //检测最大左滑距离
    if (moveX < -this.maxMoveLeft) {
      moveX = -this.maxMoveLeft;
    }
    this.moveX = moveX;
    this.translateXMsgItem(e.currentTarget.id, moveX, 0);
  },
  ontouchend: function(e) {
    this.swipeCheckState = 0;
    var swipeDirection = this.swipeDirection;
    this.swipeDirection = 0;
    if (this.touchStartState === 1) {
      this.touchStartState = 0;
      this.setData({scrollY:true});
      return;
    } 
    //垂直滚动，忽略
    if (swipeDirection !== 1) {
      return;
    }
    if (this.moveX === 0) {
      this.showState = 0;
      //不显示菜单状态下,激活垂直滚动
      this.setData({scrollY:true});
      return;
    }
    if (this.moveX === this.correctMoveLeft) {
      this.showState = 1;
      this.lastShowMsgId = e.currentTarget.id;
      return;
    }  
    if (this.moveX < -this.thresholdMoveLeft) {
      this.moveX = -this.correctMoveLeft;
      this.showState = 1;
      this.lastShowMsgId = e.currentTarget.id;
    }
    else {
      this.moveX = 0;
      this.showState = 0;
      //不显示菜单,激活垂直滚动
      this.setData({scrollY:true});
    }
    this.translateXMsgItem(e.currentTarget.id, this.moveX, 500);
    //this.translateXMsgItem(e.currentTarget.id, 0, 0);
  },
  onDeleteMsgTap: function(e) {
    this.deleteMsgItem(e);
  },
  onDeleteMsgLongtap: function(e) {
    console.log(e);
  },
  onMarkMsgTap: function(e) {
    console.log(e);
  },
  onMarkMsgLongtap: function(e) {
    console.log(e);
  },
  getItemIndex: function(id) {
    var msgList = this.data.msgList;
    for (var i = 0; i < msgList.length; i++) {
      if (msgList[i].id === id) {
        return i;
      }
    }
    return -1;
  },
  deleteMsgItem: function(e) {
    var animation = wx.createAnimation({duration:200});
    animation.height(0).opacity(0).step();
    this.animationMsgWrapItem(e.currentTarget.id, animation);
    var s = this;
    setTimeout(function() {
      var index = s.getItemIndex(e.currentTarget.id);
      s.data.msgList.splice(index, 1);
      s.setData({msgList: s.data.msgList});
    }, 200);
    this.showState = 0;
    this.setData({scrollY:true});
  },
  translateXMsgItem: function(id, x, duration) {
    var animation = wx.createAnimation({duration:duration});
    animation.translateX(x).step();
    this.animationMsgItem(id, animation);
  },
  animationMsgItem: function(id, animation) {
    var index = this.getItemIndex(id);
    var param = {};
    var indexString = 'msgList[' + index + '].animation';
    param[indexString] = animation.export();
    this.setData(param);
  },
  animationMsgWrapItem: function(id, animation) {
    var index = this.getItemIndex(id);
    var param = {};
    var indexString = 'msgList[' + index + '].wrapAnimation';
    param[indexString] = animation.export();
    this.setData(param);
  },


})

原文作者：祈澈姑娘。 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子一枚，爱编程，爱运营，爱折腾。长期坚持总结工作中遇到的技术问题。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,657评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,662评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,143评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,732评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,837评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,036评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,126评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,868评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,315评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2赞 351

推荐阅读更多精彩内容