最近在用微信的小程序写一个小模块，打算实现一下左右滑动功能，从官方的示例里面没有发现相关代码，便在网上搜了一下，发现好多的大侠将简单的功能说的特复杂，还是我来总结一下自己的实现吧。
WXML代码：
<!--slide.wxml-->
<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
{{content}}
</view>
js代码：
// slide.js
//获取应用实例
const app = getApp();
var startX, endX;
var moveFlag = true;// 判断执行滑动事件
Page({
/**
* 页面的初始数据
*/
data: {
content:"可以试试左右滑动了"
},
touchStart: function (e) {
startX = e.touches[0].pageX; // 获取触摸时的原点
moveFlag = true;
},
// 触摸移动事件
touchMove: function (e) {
endX = e.touches[0].pageX; // 获取触摸时的原点
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;
}
}
},
// 触摸结束事件
touchEnd: function (e) {
moveFlag = true; // 回复滑动事件
},
move2left() {
var that = this;
that.setData({
content: "move2left"
});
},
move2right() {
var that = this;
that.setData({
content: "move2right"
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
WXSS代码：
/* slide.wxss */
page {
background-color: #fbf9fe;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: space-between;
}
总结
运行效果如下：
初始页面:
image.png
向左滑动：
image.png
向右滑动：
运行一下看看效果吧。
