微信小程序实现左右滑动(带动画)

实例代码

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>

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)
    }
})

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%
}

说明

滑动切换页面是根据判断用户在屏幕上的左右滑动操作，然后通过显示和隐藏view实现。

动画

（1）创建动画实例

var animation = wx.createAnimation({
      duration: 1000,    //动画时长
      timingFunction: 'ease',  //动画的效果 
      delay: 100 //动画延迟时间，单位 ms
    });

（2）动画的动作

    animation.opacity(0.2).translate(-500, 0).step()
    //opacity动画的透明， 范围：0-1
    //translate(number tx, number ty)   tx 横向移动，单位 px； ty 纵向移动，单位 px；

（3）将动画绑定到元素

    this.setData({
      ani1: animation.export()
    })

微信小程序实现左右滑动

动画·小程序