微信小程序 界面从右边滑出_微信小程序实现左右滑动功能

最近在用微信的小程序写一个小模块，打算实现一下左右滑动功能，从官方的示例里面没有发现相关代码，便在网上搜了一下，发现好多的大侠将简单的功能说的特复杂，还是我来总结一下自己的实现吧。

WXML代码：

{{content}}

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

向右滑动：

运行一下看看效果吧。