zoukankan      html  css  js  c++  java
  • 在小程序写下拉的动画

    <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;
      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"
        })
      }
    
  • 相关阅读:
    newman
    集合自动化
    56. Merge Intervals
    55. Jump Game
    48. Rotate Image
    34. Search for a Range
    33. Search in Rotated Sorted Array
    16. 3Sum Closest
    15. 3Sum
    11. Container With Most Water
  • 原文地址:https://www.cnblogs.com/hyx626/p/14879674.html
Copyright © 2011-2022 走看看