微信小程序实现滑动操作

目录

 

前言

实现过程

---

前言

本文使用动画组件wx.createAnimation来实现滑动操作：

1. 左滑动显示操作项区域；

2. 点击操作项触发相应方法；

3. 右滑动和点击行收起操作项；

4. 点击“删除”并确定则删除该条数据。

最终效果如下：

实现过程

1. 文件index.wxml和index.wxss代码如下，这一块比较简单，可自行查看，不做过多分析；

Tips：“详情”、“取号”和“删除”点击触发使用catchtap，阻止冒泡事件向上冒泡；

<view class="wrapper">
  <view class="container">
    <view class="list">
      <view class="line" bindtouchstart="touchstartX" bindtap="resetX" bindtouchmove="touchmoveX" bindtouchend="touchendX" animation="{
   
   {currentIndex === index ?animation : ''}}" data-index="{
   
   {index}}" wx:for="{
   
   {recordList}}" wx:key="id">
        <image class="icon-title" src="../../images/start_icon.png"></image>
        <view class="mes">
          <view class="title">{
   
   {item.title}}</view>
          <view class="date">预约时间：{
   
   {item.date}}</view>
          <view class="status">状态：<text>{
   
   {item.status}}</text></view>
        </view>
        <view class="operation">
          <view class="detail" catchtap="openDetail">详情</view>
          <view class="number" catchtap="getNumber">取号</view>
          <view class="delete" catchtap="deleteItem">删除</view>
        </view>
      </view>
    </view>
  </view>
</view>

.container .line {
  display: flex;
  padding: 20rpx 30rpx;
  border-bottom: 2rpx solid #ebebeb;
  position: relative;
  cursor: pointer;
}

.container .line .icon-title {
  margin-top: 28rpx;
  width: 30rpx;
  height: 30rpx;
}

.container .line .mes {
  flex: 1;
  margin-left: 10rpx;
}

.container .line .mes .date, .container .line .mes .status {
  color: #9d9d9d;
  font-size: 24rpx;
  margin-top: 4rpx;
}

.status text {
  color: #fba500;
}

.operation {
  position: absolute;
  top: 0;
  right: -300rpx;
  height: 152rpx;
  text-align: center;
  color: #fff;
  line-height: 152rpx;
  display: flex;
}

.operation view {
  width: 100rpx;
}

.operation .detail {
  background-color: #018efb;
}

.operation .number {
  background-color: #fba500;
}

.operation .delete {
  background-color: #cfcfcf;
}

2. 文件index.js存放所有功能的逻辑代码，下面主要分析几个重点方法：

1）方法touchmoveX用于手指触摸后移动时获取移动距离，并根据移动距离动画显示操作项相应区域，使移动有即时效果；

2）方法touchendX用于手指触摸动作结束时，如果移动距离达到100，则动画显示全部操作项区域；如果移动距离未达到100，则收起操作项区域；

3）方法deleteItem用于删除该条数据。

let movedistance = 0;
Page({
  data: {
    currentIndex: 0, // 列表操作项的index
    recordList: [{ // 列表数据
      id: 1,
      title: '业务办理01',
      date: '2020-04-21 10:30-12:00',
      status: '未取号'
    }, {
      id: 2,
      title: '业务办理02',
      date: '2020-04-21 10:30-12:00',
      status: '未取号'
    }, {
      id: 3,
      title: '业务办理03',
      date: '2020-04-21 10:30-12:00',
      status: '取号'
    }]
  },
  // 打开详情页
  openDetail() {
    console.log(this.data.currentIndex, '点击详情');
  },
  // 取号
  getNumber() {
    console.log(this.data.currentIndex, '点击取号');
  },
  // 删除数据
  deleteItem() {
    let that = this;
    let recordList = this.data.recordList;
    wx.showModal({
      title: '提示',
      content: '是否删除该条数据？',
      success(res) {
        if (res.confirm) {
          that.slideAnimation(0, 500);
          recordList.splice(that.data.currentIndex, 1);
          that.setData({
            recordList: recordList
          });
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    });
  },
  // 手指触摸动作开始
  touchstartX(e) {
    this.setData({
      currentIndex: e.currentTarget.dataset.index
    });
    // 获取触摸X坐标
    this.recordX = e.touches[0].clientX;
  },
  // 点击操作
  resetX() {
    this.slideAnimation(0, 500);
  },
  // 手指触摸后移动
  touchmoveX(e) {
    let currentX = e.touches[0].clientX;
    movedistance = currentX - this.recordX; // 获取移动距离
    this.slideAnimation(movedistance, 500);
  },
  // 手指触摸动作结束
  touchendX() {
    let recordX;
    if (movedistance <= -100) { // 移动达到距离就动画显示全部操作项
      recordX = -300;
    } else if (movedistance >= -100) { // 移动未达到距离即还原
      recordX = 0;
    }
    this.slideAnimation(recordX, 500);
  },
  // 滑动动画
  slideAnimation(recordX, time) {
    let animation = wx.createAnimation({
      duration: time,
      timingFunction: 'ease'
    });
    animation.translate(recordX + 'rpx', 0).step()
    this.setData({
      animation: animation.export()
    })
  },
  onLoad: function(options) {
    wx.setNavigationBarTitle({
      title: '银行业务',
    });
    movedistance = 0; // 解决切换到其它页面再返回该页面动画失效的问题
  }
})

扫描公众号，了解更多实例分享：