更新记录

1.0.0（2026-04-14） 下载此版本

添加橡皮筋弹簧动画，触底和触顶时有回弹效果，滚动区域下拉弹簧动画，阻尼拉伸

平台兼容性

uni-app(3.7.6)

核心功能 自定义容器高度 支持传入 px、rpx、vh、vw、% 等多种单位，内部自动转换为 px 进行滚动计算。

橡皮筋拉伸回弹

滚动到顶部或底部时，继续拖动会产生阻尼拉伸（内容超出边界）。

松手后平滑回弹至边界，模拟 iOS 列表的“橡皮筋”手感。

即使内容高度小于容器高度，依然支持双向拉伸回弹。

惯性滑动

快速滑动后松开，内容会按手指离开时的速度继续滚动，并逐渐减速停止。

支持速度平滑处理（取最近几次速度平均值），避免抖动。

边界处惯性会自然衰减并回弹，无生硬停止。

完全接管触摸事件

使用 touchmove.prevent 阻止页面滚动，避免与 webview 原生滚动冲突。

在安卓 App 端表现稳定，无滚动穿透问题。

流畅动画管理

回弹动画时长、阻尼系数、摩擦系数均可配置。

触摸时立即取消进行中的惯性或回弹动画，保证交互即时响应。

快速反复拉拽时，每次回弹动画完整执行，不叠加、不加速。

编程式滚动 暴露 scrollTo(y, animated) 方法，可外部控制滚动位置。

适用场景 弹窗/抽屉内的长列表：需要优雅的边界回弹效果，避免生硬截断。

自定义下拉刷新/上拉加载：基于橡皮筋拉伸状态触发刷新。

卡片式滚动区域：例如商品详情页的规格选择面板、评论列表等。

需要统一 iOS/Android 滚动体验：在安卓上复刻 iOS 的滚动回弹特性。

使用示例 vue，把组件直接放到你的components下就可以直接引用使用

<template>
  <RubberScroll 
    height="500rpx" 
    :bounceRatio="0.4" 
    :duration="300"
    :friction="0.96"
  >
    <view v-for="i in 20" :key="i" class="item">列表项 {{ i }}</view>
  </RubberScroll>
</template>

<script>
import RubberScroll from '@/components/RubberScroll.vue';
export default {
  components: { RubberScroll }
};
</script>

可配置参数

方法（通过 ref 调用）

总结 RubberScroll 是一个高仿 iOS 滚动回弹效果的 uni-app 组件，完全替代原生滚动视图，提供细腻的拉伸回弹和惯性滑动，同时完美兼容安卓 App 端。它解决了跨平台滚动体验不一致的痛点，适合需要精致交互的应用场景。