快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)滑動(dòng)操作代碼

更新時(shí)間：2020年04月23日 16:23:59 作者：king0964

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)操作代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

本文使用動(dòng)畫(huà)組件wx.createAnimation來(lái)實(shí)現(xiàn)滑動(dòng)操作：

1. 左滑動(dòng)顯示操作項(xiàng)區(qū)域；

2. 點(diǎn)擊操作項(xiàng)觸發(fā)相應(yīng)方法；

3. 右滑動(dòng)和點(diǎn)擊行收起操作項(xiàng)；

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

最終效果如下：

實(shí)現(xiàn)過(guò)程

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

Tips：“詳情”、“取號(hào)”和“刪除”點(diǎn)擊觸發(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 ?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">預(yù)約時(shí)間：{{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">取號(hào)</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存放所有功能的邏輯代碼，下面主要分析幾個(gè)重點(diǎn)方法：

1）方法touchmoveX用于手指觸摸后移動(dòng)時(shí)獲取移動(dòng)距離，并根據(jù)移動(dòng)距離動(dòng)畫(huà)顯示操作項(xiàng)相應(yīng)區(qū)域，使移動(dòng)有即時(shí)效果；

2）方法touchendX用于手指觸摸動(dòng)作結(jié)束時(shí)，如果移動(dòng)距離達(dá)到100，則動(dòng)畫(huà)顯示全部操作項(xiàng)區(qū)域；如果移動(dòng)距離未達(dá)到100，則收起操作項(xiàng)區(qū)域；

3）方法deleteItem用于刪除該條數(shù)據(jù)。

let movedistance = 0;
Page({
 data: {
  currentIndex: 0, // 列表操作項(xiàng)的index
  recordList: [{ // 列表數(shù)據(jù)
   id: 1,
   title: '業(yè)務(wù)辦理01',
   date: '2020-04-21 10:30-12:00',
   status: '未取號(hào)'
  }, {
   id: 2,
   title: '業(yè)務(wù)辦理02',
   date: '2020-04-21 10:30-12:00',
   status: '未取號(hào)'
  }, {
   id: 3,
   title: '業(yè)務(wù)辦理03',
   date: '2020-04-21 10:30-12:00',
   status: '取號(hào)'
  }]
 },
 // 打開(kāi)詳情頁(yè)
 openDetail() {
  console.log(this.data.currentIndex, '點(diǎn)擊詳情');
 },
 // 取號(hào)
 getNumber() {
  console.log(this.data.currentIndex, '點(diǎn)擊取號(hào)');
 },
 // 刪除數(shù)據(jù)
 deleteItem() {
  let that = this;
  let recordList = this.data.recordList;
  wx.showModal({
   title: '提示',
   content: '是否刪除該條數(shù)據(jù)？',
   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('用戶(hù)點(diǎn)擊取消')
    }
   }
  });
 },
 // 手指觸摸動(dòng)作開(kāi)始
 touchstartX(e) {
  this.setData({
   currentIndex: e.currentTarget.dataset.index
  });
  // 獲取觸摸X坐標(biāo)
  this.recordX = e.touches[0].clientX;
 },
 // 點(diǎn)擊操作
 resetX() {
  this.slideAnimation(0, 500);
 },
 // 手指觸摸后移動(dòng)
 touchmoveX(e) {
  let currentX = e.touches[0].clientX;
  movedistance = currentX - this.recordX; // 獲取移動(dòng)距離
  this.slideAnimation(movedistance, 500);
 },
 // 手指觸摸動(dòng)作結(jié)束
 touchendX() {
  let recordX;
  if (movedistance <= -100) { // 移動(dòng)達(dá)到距離就動(dòng)畫(huà)顯示全部操作項(xiàng)
   recordX = -300;
  } else if (movedistance >= -100) { // 移動(dòng)未達(dá)到距離即還原
   recordX = 0;
  }
  this.slideAnimation(recordX, 500);
 },
 // 滑動(dòng)動(dòng)畫(huà)
 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: '銀行業(yè)務(wù)',
  });
  movedistance = 0; // 解決切換到其它頁(yè)面再返回該頁(yè)面動(dòng)畫(huà)失效的問(wèn)題
 }
})

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)滑動(dòng)操作代碼的文章就介紹到這了,更多相關(guān)微信小程序滑動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: