小程序实现左右滑动

一、效果图

三、实例代码

1 wxml

 

<view class="container1" wx:if="{{page == 1}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani1}}">

container1

</view>

<view class="container2" wx:if="{{page == 2}}"  bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani2}}">

container2

</view>

2 js

 

const app = getApp()

var startX, endX;

var moveFlag = true;// 判断执行滑动事件

Page({

  data: {

    page : 1,

    ani1: '',

    ani2: ''

  },

  onLoad: function () {



  },



  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;

    if (this.data.page == 2) {

      return

    }

    var animation = wx.createAnimation({

      duration: 1000,

      timingFunction: 'ease',

      delay: 100

    });

    animation.opacity(0.2).translate(-500, 0).step()

    this.setData({

      ani1: animation.export()

    })

    setTimeout(function () {

      that.setData({

        page: 2,

        ani2: ''

      });

    }, 800)

  },

  //向右滑动操作

  move2right() {

    var that = this;

    if (this.data.page == 1) {

      return

    }

    var animation = wx.createAnimation({

      duration: 1000,

      timingFunction: 'ease',

      delay: 100

    });

    animation.opacity(0.2).translate(500, 0).step()

    this.setData({

      ani2: animation.export()

    })

    setTimeout(function () {

      that.setData({

        page: 1,

        ani1: ''

      });

    }, 800)

    }

})

3 wxss

 

.container1 {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 200rpx 0;

  box-sizing: border-box;

  background-color: rgb(224, 118, 118)

}

.container2 {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 200rpx 0;

  box-sizing: border-box;

  background-color: wheat

}

page{

  height: 100%

}

作者：panghu33
链接：https://www.jianshu.com/p/2d03af2e8741
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。