微信小程序之列表左滑删除功能

jiezi

5 年前

第一次写小程序，记录一下遇到的需求以及解决方法。可能功能不是很难，主要是做下记录。为以后遇到相同的需求做铺垫。

用过 QQ 的人都知道，消息列表内，左滑单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说，这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。

最外层一个 view 水平方向排列，里面包含一个内容区view, 一个操作区view
让你要展示的布局充满屏幕，通过 css 样式让超出的删除按钮隐藏
监听 touch 事件，平移布局显示和隐藏删除按钮 (列表每一项中有一个isTouchMove 属性，通过监听 touch 改变该属性给列表不同的样式将隐藏的按钮显示出来)

wxml

<view class="list-page">
  <view class="list-item {{user.isTouchMove?'list-item-touch-active':''}}"wx:for="{{list}}"wx:for-item="user"wx:for-index="index"wx:key="user.id"bindtouchstart="touchstart"bindtouchmove="touchmove"data-id="{{user.id}}">

    <view class="item-content">
      <view class="content-name">{{user.name}}</view>
      <view class="content-info"> 
        <text>{{user.phone}}</text>
        <text>{{user.sex}}</text>
      </view>
    </view>

    <view class="item-delete"> 删除 </view>
  </view>
</view>

wxss

.list-page{
  display: flex;
  flex-direction: column;
  border-top: 2rpx solid #f0f0f0
}
.list-item{
  height: 160rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2rpx solid #f0f0f0;
}
.item-content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20rpx 0 20rpx;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(180rpx);
  transform: translateX(180rpx); 
  margin-left: -200rpx;
}
.content-info{
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 32rpx;
  color: #999
}
.content-name{width: 100%;}
.list-item-touch-active .item-content{margin-left: -100rpx;}
.list-item-touch-active .item-content, .list-item-touch-active .item-delete {-webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}
.item-delete{
  width: 100rpx;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  color: #fff;
  font-size: 32rpx;
  -webkit-transform: translateX(180rpx);
  transform: translateX(180rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

js

// pages/list/list.js
const App = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:1,
        name:'张三',
        phone:'15955040222',
        sex:'男',
        isTouchMove:false,
      },
      {
        id: 2,
        name: '张三',
        phone: '15955040222',
        sex: '男',
        isTouchMove: false,
      },
      {
        id: 3,
        name: '张三',
        phone: '15955040222',
        sex: '男',
        isTouchMove: false,
      },
      {
        id: 4,
        name: '张三',
        phone: '15955040222',
        sex: '男',
        isTouchMove: false,
      },
      {
        id: 5,
        name: '张三',
        phone: '15955040222',
        sex: '男',
        isTouchMove: false,
      },
      {
        id: 6,
        name: '张三',
        phone: '15955040222',
        sex: '男',
        isTouchMove: false,
      },
      {
        id: 7,
        name: '张三',
        phone: '15955040222',
        sex: '男',
        isTouchMove: false,
      },
    ]
  },
  touchstart: function (e) {
    // 开始触摸时 重置所有删除
    let data = App.touch._touchstart(e, this.data.list) // 将修改过的 list setData
    this.setData({list: data})
  },

  // 滑动事件处理
  touchmove: function (e) {let data = App.touch._touchmove(e, this.data.list,'id')// 将修改过的 list setData
    this.setData({list: data})
  },
})

对于滑动事件的处理专门封装了一个 .js 文件，防止以后还会用到。

var startX
var startY
class touch {constructor() { }

  _touchstart(e, items) {
    // 开始触摸时 重置所有删除
    items.forEach(function (v, i) {if (v.isTouchMove) // 只操作为 true 的
        v.isTouchMove = false;
    })

    startX = e.changedTouches[0].clientX
    startY = e.changedTouches[0].clientY

    return items
  }

  _touchmove(e, items,key) {
      const id = e.currentTarget.dataset.id, // 获取列表中每一项的唯一值，可以取 id
      touchMoveX = e.changedTouches[0].clientX, // 滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY, // 滑动变化坐标
      // 获取滑动角度
      angle = this._angle({
        X: startX,
        Y: startY
      }, {
          X: touchMoveX,
          Y: touchMoveY
        });
    items.forEach(function (v, i) {
      v.isTouchMove = false
      // 滑动超过 30 度角 return
      if (Math.abs(angle) > 30) return;
      if (v[key] == id) { // 判断滑动的 id 与列表中的 id 是否一致，如果是的话，改变滑动这一项的 isTouchMove 属性
        if (touchMoveX > startX) // 右滑
          v.isTouchMove = false
        else // 左滑
          v.isTouchMove = true
      }
    })
    return items
  }

  _angle(start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    // 返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  }
}

export default touch

然后去引用这个 touch.js 文件, 在 app.js 文件中

//app.js
import touch from './utils/touch.js'// 新加
App({
  globalData: {userInfo: null},
  touch: new touch() // 实例化这个 touch 对象})

到这里左滑删除就告一段落了，主要就是先使用 css 将删除按钮隐藏起来，然后通过监听 touch 事件去改变列表中每一项的一个属性，间接修改这个条目的样式将删除按钮显示出来
源码上传至 github 微信小程序之列表左滑删除功能
原文地址微信小程序之列表左滑删除功能

微信小程序之列表左滑删除功能

介绍

什么是左滑删除

实现原理

直接上代码

末尾