微信小程序如何实现滑动-创新互联

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

前言

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

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

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

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

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

最终效果如下：

实现过程

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

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

 
  
   
    
    
     {{item.title}}
     预约时间：{{item.date}}
     状态：{{item.status}}
    
    
     详情
     取号
     删除