微信小程序實現左右滑動

一、index.wxml文件：

<view class="swiper-content {{currentTab==0 ? 'content-active' : ''}}" bindtouchstart="touchStart" bindtouchend="touchEnd">
　　<image src='../../images/index/caption.jpg'></image>
</view>

二、js文件

var time = 0;
var touchDot = 0;//觸摸時的原點
var interval = "";

 

/**
* 觸摸開始事件
*/
touchStart:function(e){
　　touchDot = e.touches[0].pageX; // 獲取觸摸時的原點
　　// 使用js計時器記錄時間
　　interval = setInterval(function () {
　　time++;
　　}, 100);
　　console.log("touchStart")
},
touchEnd:function(e){
　　console.log("touchEnd")
　　var that = this;
　　var touchMove = e.changedTouches[0].pageX;
　　var moveIndex = e.currentTarget.dataset.tab;
　　// 向左滑動
　　if (touchMove - touchDot <= -40 && time < 10) {
　　　　//執行切換頁面的方法
　　　　console.log("向左滑動");

　　　　if (moveIndex == 0 || moveIndex == 1) {
　　　　　　moveIndex++;
　　　　} else if (moveIndex == 2) {
　　　　　　moveIndex
　　　　}
　　　　console.log("e.target.dataset.current===" + e.currentTarget.dataset.tab)
　　　　this.setData({
　　　　　　currentTab: moveIndex
　　　　})
　　}
　　// 向右滑動
　　if (touchMove - touchDot >= 40 && time < 10) {
　　　　if (moveIndex == 0 || moveIndex == 1) {
　　　　　　moveIndex = 0;
　　　　} else if (moveIndex == 2) {
　　　　　　moveIndex = 1;
　　　　}
　　　　//執行切換頁面的方法
　　　　console.log("向右滑動");
　　　　this.setData({
　　　　　　currentTab: moveIndex
　　　　})
　　}
　　clearInterval(interval); // 清除setInterval
　　time = 0;
}