本文若对你有用,给个免费 Star 和关注,持续输出前端各种稀奇古怪的问题

所实现的效果如图

橡皮筋效果回弹.gif

代码如下,注释齐全, 粘贴即用:

<template>
    <view class="bounce" :animation="animationData">
        <view  class ="box" @touchstart="touchstart" @touchend="touchend"  @touchmove="touchmove">
            <view v-for="i in 20" :key="i">{{i}}</view>
        </view>
    </view>
</template>

<script>
  /**
   * touchstart touchend touchmove 需要拖动哪个盒子, 就在哪个盒子写,
   * animationData 需要哪个盒子回弹就在那里写
   * animationData 与  touchstart touchend touchmove 可以嵌套,父子,同一个盒子,其他关系请自行尝试
   */
    export default {
        data() {
            return {
     pageY: 0,
        animationData: {},
        touchmoveY: 0
            }
        },
        methods: {
      // 定义动画
      getAnimation(s, h) {
        let animation = uni.createAnimation({ // 定义全局初始化动画
          duration: s, // 定义动画持续的时间 ms
          timingFunction: 'ease', // 定义动画的进行
        })
        animation.translateY(h).step(); // 移动距离
        this.animationData = animation.export() // 将定义的动画赋值给animationData
      },
      touchstart(e) {
        this.pageY = e.touches[0].pageY
      },
      touchend(e) {
        this.getAnimation(300, 0)
      },
      touchmove(e) {
        let pageY = Math.ceil(e.touches[0].pageY)
        let h = pageY - this.pageY;     // h移动的距离, 是滑动回弹的距离,除以的数越大,距离越小
        if (h < 0&& pageY < this.touchmoveY && pageY >= 200) {
          this.getAnimation(300, h/2 + 'px');  // 上拉动画 
        } else {
          this.getAnimation(300, h/3 + 'px');  // 下拉动画
        }
        this.touchmoveY =  pageY        // 将点的坐标存储起来用于移动时作比较
      }
    }
  }
</script>

<style scoped>
  .bounce { width: 200vh; background-color: skyblue; }
    .box { width: 100%; transition: all .4s; }
</style>