这篇文章主要为大家展示了微信小程序如何实现滑动，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

前言

本文使用动画组件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 &#63;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; // 解决切换到其它页面再返回该页面动画失效的问题 }})

以上就是关于微信小程序如何实现滑动的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。