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

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

创新互联专注于企业全网营销推广、网站重做改版、宁河网站定制设计、自适应品牌网站建设、H5场景定制、成都做商城网站、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为宁河等各大城市提供网站开发制作服务。

前言

本文使用动画组件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>

网站题目：微信小程序如何实现滑动-创新互联
URL网址：https://www.cdcxhl.com/article6/ccedig.html

成都网站建设公司_创新互联，为您提供网站建设、全网营销推广、建站公司、标签优化、网站改版、网站策划

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联