最近在用微信的小程序?qū)懸粋€(gè)小模塊焙压，打算實(shí)現(xiàn)一下左右滑動(dòng)功能谆趾，從官方的示例里面沒有發(fā)現(xiàn)相關(guān)代碼于购，便在網(wǎng)上搜了一下，發(fā)現(xiàn)好多的大俠將簡單的功能說的特復(fù)雜创泄，還是我來總結(jié)一下自己的實(shí)現(xiàn)吧艺玲。
WXML代碼：
<!--slide.wxml-->
<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
{{content}}
</view>
js代碼：
// slide.js
//獲取應(yīng)用實(shí)例
const app = getApp();
var startX, endX;
var moveFlag = true;// 判斷執(zhí)行滑動(dòng)事件
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
content:"可以試試左右滑動(dòng)了"
},
touchStart: function (e) {
startX = e.touches[0].pageX; // 獲取觸摸時(shí)的原點(diǎn)
moveFlag = true;
},
// 觸摸移動(dòng)事件
touchMove: function (e) {
endX = e.touches[0].pageX; // 獲取觸摸時(shí)的原點(diǎn)
if (moveFlag) {
if (endX - startX > 50) {
console.log("move right");
this.move2right();
moveFlag = false;
}
if (startX - endX > 50) {
console.log("move left");
this.move2left();
moveFlag = false;
}
}
},
// 觸摸結(jié)束事件
touchEnd: function (e) {
moveFlag = true; // 回復(fù)滑動(dòng)事件
},
move2left() {
var that = this;
that.setData({
content: "move2left"
});
},
move2right() {
var that = this;
that.setData({
content: "move2right"
});
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
WXSS代碼：
/* slide.wxss */
page {
background-color: #fbf9fe;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: space-between;
}
總結(jié)
運(yùn)行效果如下：
初始頁面:
image.png
向左滑動(dòng)：
image.png
向右滑動(dòng)：
運(yùn)行一下看看效果吧。
