微信小程序实现左右滑动

1、index.wxml文件：

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

2、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;
}

转载于:https://www.cnblogs.com/yuan-luo/p/9120670.html