這篇文章主要為大家展示了微信小程序如何實現(xiàn)滑動，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、寧河網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5場景定制、成都做商城網(wǎng)站、集團公司官網(wǎng)建設、外貿營銷網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為寧河等各大城市提供網(wǎng)站開發(fā)制作服務。

前言

本文使用動畫組件wx.createAnimation來實現(xiàn)滑動操作：

1. 左滑動顯示操作項區(qū)域；

2. 點擊操作項觸發(fā)相應方法；

3. 右滑動和點擊行收起操作項；

4. 點擊“刪除”并確定則刪除該條數(shù)據(jù)。

最終效果如下：

實現(xiàn)過程

1. 文件index.wxml和index.wxss代碼如下，這一塊比較簡單，可自行查看，不做過多分析；

Tips：“詳情”、“取號”和“刪除”點擊觸發(fā)使用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">狀態(tài)：<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>

網(wǎng)站題目：微信小程序如何實現(xiàn)滑動-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://www.chinadenli.net/article6/ccedig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、全網(wǎng)營銷推廣、建站公司、標簽優(yōu)化、網(wǎng)站改版、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)