在小程序写下拉的动画

<view class="head-wrap" style="height:300rpx;background:#999;"></view>
<view class="card-wrap" style="transform:{{translateValue}};transition:{{transitionVal}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" ></view>
.card-wrap{
 background: pink;
  height: 600rpx;
  width:100%;
}
  let moveY=0 ,startY=0;
  data: {
    translateValue:"translateY(0rpx)",
    transitionVal:"transform 1s linear"
  },
  touchstart(e){
    console.log(e);
    startY = e.touches[0].clientY;
    this.setData({
      transitionVal:''
    })
  },
  touchmove(e){
    moveY = e.touches[0].clientY;
    let moveDistance =moveY - startY;
    if(moveDistance < 0){
      return;
    }
    if(moveDistance > 200){
      moveDistance = 200;
    }
    this.setData({
      translateValue:`translateY(${moveDistance}rpx)`
    })
  },
  touchend(e){
    this.setData({
      translateValue:"translate(0rpx)",
      transitionVal:"transform 1s linear"
    })
  }
posted @ 2021-06-13 09:30  十年后2028  阅读(89)  评论(0编辑  收藏  举报