微信小程序列表左滑删除

微信小程序没有提供列表左滑删除的控件,项目中如果有这个需求,就需要自己去实现。我们可以通过touch事件来实现。

  • bindtouchstart 手指触摸开始时,记录 startX 和 startY 开始坐标
  • bindtouchmove 手指触摸滑动时,记录 touchMoveX 和 touchMoveY 滑动变化的坐标

我们还要计算滑动角度,只有当用户左滑的角度 < 30 度的时候,我们才会显示右侧的删除按钮。

实现代码

  • Html
<view class="page-wrap">
  <scroll-view catchtouchmove="stopTouchMove" scroll-y="true" style="height:{{scrollBoxH + 'px'}}"  wx:if="{{pageCanShow}}">
    <view class="account-box {{item.isTouchMove ? 'touch-move-active' : ''}}" bindtouchstart="touchS" bindtouchmove="touchM" data-index="{{index}}" wx:for="{{dataList}}" wx:key="index">
      <view class="account-item" style="{{index == dataList.length-1 ? 'margin-bottom: 20rpx;' : ''}}" bindtap="accountListClicked" data-index="{{index}}">
        <view class="cell-title-box">
          <text>列表内容</text>
        </view>
      </view>
      <view class="del" catchtap="delAccountClicked" data-index='{{index}}'>删除</view>
    </view>
  </scroll-view>
</view>
  • CSS
/* 左滑删除相关css */
.account-box {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
}

.touch-move-active .account-item, .touch-move-active .del {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.account-item {
  width: 100%;
  margin: 20rpx 0 0;
  padding: 0 30rpx;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(130rpx);
  transform: translateX(130rpx);
  margin-left: -130rpx;
  background-color: #ffffff;
}

.cell-title-box {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #f0f2f2;
}

.del {
  width: 130rpx;
  margin: 20rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #f96160; 
  -webkit-transform: translateX(130rpx);
  transform: translateX(130rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
  • JS
data: {
  dataList: [], // 数据列表
  startX: 0, // 开始坐标X轴
  startY: 0  // 开始坐标Y轴
},
// 禁用手动滑动切换
// 由于最外层是用 <scroll-view> 标签包裹的,所以 X 轴滑动时可能会有弹性,这里为了效果更好,可以使用该方法
stopTouchMove: function () {
  return false;
},
// 手指触摸开始
touchS: function(e) {
  //开始触摸时 重置所有删除
  this.data.dataList.forEach(function(v, i) {
    if (v.isTouchMove) //只操作为true的
      v.isTouchMove = false;
  })
  this.setData({
    startX: e.changedTouches[0].clientX,
    startY: e.changedTouches[0].clientY,
    dataList: this.data.dataList
  }) 
},
// 手指触摸滑动
touchM: function(e) {
  var index = e.currentTarget.dataset.index //当前索引
  var startX = this.data.startX //开始X坐标
  var startY = this.data.startY //开始Y坐标
  var touchMoveX = e.changedTouches[0].clientX //滑动变化坐标
  var touchMoveY = e.changedTouches[0].clientY //滑动变化坐标
  //获取滑动角度
  var angle = this.angle({
    X: startX,
    Y: startY
  }, {
    X: touchMoveX,
    Y: touchMoveY
  });
  this.data.dataList.forEach(function(v, i) {
    v.isTouchMove = false
    //滑动超过30度角 return
    if (Math.abs(angle) > 30) return;
    if (i == index) {
      if (touchMoveX > startX) { //右滑
        v.isTouchMove = false
      } else { //左滑
        v.isTouchMove = true
      }
    }
  })
  //更新数据
  this.setData({
    dataList: this.data.dataList
  })
},
/**
 * 计算滑动角度
 * @param {Object} start 起点坐标
 * @param {Object} end 终点坐标
 */
angle: function(start, end) {
  var _X = end.X - start.X,
    _Y = end.Y - start.Y
  //返回角度 /Math.atan()返回数字的反正切值
  return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
//点击删除按钮事件
delAccountClicked: function(e) {
  var that = this;
  wx.showModal({
    content: '请确定要删除账户吗?',
    cancelColor: '#409eff',
    confirmColor: '#f96160',
    success(res) {
      if (res.confirm) {
        that.delAccount(e);
      }
    }
  })
},
//请求删除账户接口
delAccount: function(e) {
  let index = e.currentTarget.dataset.index;
  this.delItem(index)
},
//点击删除账户刷新页面
delItem: function(index) {
  var list = this.data.dataList
  list.splice(index, 1);
  this.setData({
    dataList: list
  });
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,744评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,505评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,105评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,242评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,269评论 6 389
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,215评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,096评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,939评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,354评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,448评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,048评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2 354

推荐阅读更多精彩内容