uniapp使用nvue写一个高性能的可复用的上下滑动橡皮筋效果页面

首先，在uniapp中使用nvue来写一个可复用的上下滑动橡皮筋效果页面需要先创建一个nvue页面，然后在该页面中实现上下滑动橡皮筋效果。

下面是一个示例代码：

<template>
  <scroll-view class="scroll-view" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="80" :refresher-default-style="true" :refresher-background="refresherBackground" @refresherrefresh="onRefresh" @scroll="onScroll">
    <div class="content">
      <!-- 页面内容 -->
    </div>
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        refresherBackground: '#f9f9f9', // 下拉刷新背景颜色
        refresherDefaultStyle: true, // 下拉刷新默认样式
        refresherThreshold: 80, // 下拉刷新阈值
        startY: 0, // 滑动开始位置
        endY: 0, // 滑动结束位置
        lastMoveY: 0, // 上一次滑动Y位置
        isTop: true, // 是否在顶部
        isBottom: false, // 是否在底部
        isMoving: false, // 是否正在滑动
        contentHeight: 0, // 内容高度
        scrollViewHeight: 0, // scroll-view高度
        maxTopHeight: 80, // 最大顶部高度
        maxBottomHeight: 80 // 最大底部高度
      }
    },
    methods: {
      onRefresh() {
        // 下拉刷新处理
        // ...
      },
      onScroll(e) {
        // 滑动处理
        if (e.detail.deltaY > 0) {
          // 向下滑动
          if (this.isTop) {
            // 在顶部
            if (this.isMoving) {
              // 正在滑动
              this.endY = e.detail.scrollTop
              let moveY = this.endY - this.startY
              if (moveY > this.maxTopHeight) {
                moveY = this.maxTopHeight
              }
              this.$refs.refresher.style.transform = `translateY(${moveY}px)`
              this.$refs.refresher.style.opacity = `${moveY / this.maxTopHeight}`
            } else {
              // 开始滑动
              this.isMoving = true
              this.startY = e.detail.scrollTop
            }
          }
        } else if (e.detail.deltaY < 0) {
          // 向上滑动
          if (this.isBottom) {
            // 在底部
            if (this.isMoving) {
              // 正在滑动
              this.endY = e.detail.scrollTop
              let moveY = this.lastMoveY + (this.endY - this.startY)
              if (moveY < -this.maxBottomHeight) {
                moveY = -this.maxBottomHeight
              }
              this.$refs.refresher.style.transform = `translateY(${moveY}px)`
              this.$refs.refresher.style.opacity = `${-moveY / this.maxBottomHeight}`
            } else {
              // 开始滑动
              this.isMoving = true
              this.startY = e.detail.scrollTop
            }
          }
        }
        this.lastMoveY = this.$refs.refresher.style.transform.replace(/[^\d.-]/g, '')
        if (e.detail.scrollTop === 0) {
          this.isTop = true
          this.isBottom = false
        } else if (e.detail.scrollTop + this.scrollViewHeight === this.contentHeight) {
          this.isTop = false
          this.isBottom = true
        } else {
          this.isTop = false
          this.isBottom = false
        }
      }
    },
    mounted() {
      // 获取scroll-view和内容的高度
      this.$nextTick(() => {
        uni.createSelectorQuery().in(this).select('.content').boundingClientRect((res) => {
          this.contentHeight = res.height
        }).exec()
        uni.createSelectorQuery().in(this).select('.scroll-view').boundingClientRect((res) => {
          this.scrollViewHeight = res.height
        }).exec()
      })
    }
  }
</script>

<style>
  .scroll-view {
    height: 100%;
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

在该代码中，我们使用了scroll-view组件来实现上下滑动效果，通过监听scroll事件来进行滑动处理。在滑动过程中，我们通过改变refresher的transform和opacity属性来实现橡皮筋效果。

其中，refresher是scroll-view自带的下拉刷新组件，我们通过设置refresher-enabled、refresher-threshold和refresher-default-style等属性来禁用下拉刷新样式，并修改refresherBackground为自定义的下拉刷新背景颜色。

通过设置isTop和isBottom属性来判断当前是否在顶部和底部，从而实现橡皮筋效果的触发。我们还设置了maxTopHeight和maxBottomHeight来限制橡皮筋效果的最大高度。

最后，在mounted中通过uni.createSelectorQuery获取scroll-view和内容的高度，用于后续的滑动处理。

这样，我们就实现了一个高性能的可复用的上下滑动橡皮筋效果页面。