這篇文章主要為大家展示了微信小程序如何實現(xiàn)滑動，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
目前創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、紅塔網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
前言
本文使用動畫組件wx.createAnimation來實現(xiàn)滑動操作：
1. 左滑動顯示操作項區(qū)域；
2. 點擊操作項觸發(fā)相應(yīng)方法；
3. 右滑動和點擊行收起操作項；
4. 點擊“刪除”并確定則刪除該條數(shù)據(jù)。
最終效果如下：
實現(xiàn)過程
1. 文件index.wxml和index.wxss代碼如下，這一塊比較簡單，可自行查看，不做過多分析；
Tips：“詳情”、“取號”和“刪除”點擊觸發(fā)使用catchtap，阻止冒泡事件向上冒泡；
{{item.title}} 預(yù)約時間：{{item.date}} 狀態(tài)： {{item.status}} 詳情 取號 刪除
重慶分公司
重慶分公司
.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用于手指觸摸后移動時獲取移動距離，并根據(jù)移動距離動畫顯示操作項相應(yīng)區(qū)域，使移動有即時效果；
2）方法touchendX用于手指觸摸動作結(jié)束時，如果移動距離達到100，則動畫顯示全部操作項區(qū)域；如果移動距離未達到100，則收起操作項區(qū)域；
3）方法deleteItem用于刪除該條數(shù)據(jù)。
let movedistance = 0;
Page({
data: {
currentIndex: 0, // 列表操作項的index
recordList: [{ // 列表數(shù)據(jù)
id: 1,
title: '業(yè)務(wù)辦理01',
date: '2020-04-21 10:30-12:00',
status: '未取號'
}, {
id: 2,
title: '業(yè)務(wù)辦理02',
date: '2020-04-21 10:30-12:00',
status: '未取號'
}, {
id: 3,
title: '業(yè)務(wù)辦理03',
date: '2020-04-21 10:30-12:00',
status: '取號'
}]
},
// 打開詳情頁
openDetail() {
console.log(this.data.currentIndex, '點擊詳情');
},
// 取號
getNumber() {
console.log(this.data.currentIndex, '點擊取號');
},
// 刪除數(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('用戶點擊取消')
}
}
});
},
// 手指觸摸動作開始
touchstartX(e) {
this.setData({
currentIndex: e.currentTarget.dataset.index
});
// 獲取觸摸X坐標(biāo)
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);
},
// 手指觸摸動作結(jié)束
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: '銀行業(yè)務(wù)',
});
movedistance = 0; // 解決切換到其它頁面再返回該頁面動畫失效的問題
}
})以上就是關(guān)于微信小程序如何實現(xiàn)滑動的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。
