微信小程序的下拉动画

微信小程序的下拉动画

<view class="cover-container" bindtouchstart="HandleTouchStart" bindtouchmove="HandleTouchMove"
    bindtouchend="HandleTouchEnd" style="transform: {{coverTransform}}; transition: {{coverTransition}}">

let startY = 0; //手指起始坐标
let moveY = 0;  //手指移动的坐标
let moveDistance = 0; //手指移动的距离



Page({
data: {
    coverTransform: 'translateY(0)',
    coverTransition: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  HandleTouchStart(event) {
    this.setData({
      // 模板字符串
      coverTransition: ''
    })
    startY = event.touches[0].clientY;
  },
  HandleTouchMove(event) {
    moveY = event.touches[0].clientY;
    moveDistance = moveY - startY;
    if (moveDistance <= 0) {
      return;
    }
    if (moveDistance >= 80) moveDistance = 80;
    this.setData({
      // 模板字符串
      coverTransform: `translateY(${moveDistance}rpx)`
    })
    //console.log(this.data.coverTransform);
  },
  HandleTouchEnd() {
    this.setData({
      // 模板字符串
      coverTransform: `translateY(0rpx)`,
      coverTransition: 'transform 1s linear'
    })
  },

主要利用了bindtouchstart，bindtouchmove,bindtouchend 三个事件。

然后写3个函数，找到y的距离，然后利用translateY 移动view容器，然后再利用transform进行渐变。