uni-app scroll-view 在ios系统下滚动到顶部时,出现scrollTop为负数的情况

uni-app scroll-view 在ios系统下滚动到顶部时,出现scrollTop为负数的情况

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 win 11
HBuilderX 正式
HBuilderX版本 4.15
手机系统 iOS
手机系统版本 iOS 18
手机厂商 苹果
手机机型 iphone 13
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

  • scroll-view 标签 从下往上拉到顶部,scroll事件中,出现scrollTop为负数

预期结果:

  • 在ios系统下,scrollTop不出现负数

实际结果:

  • scrollTop出现负数

bug描述:

  • scroll-view 在ios系统下,滚动到顶部时,出现scrollTop为负数的情况,出现回弹,想要禁掉这种情况

更多关于uni-app scroll-view 在ios系统下滚动到顶部时,出现scrollTop为负数的情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app scroll-view 在ios系统下滚动到顶部时,出现scrollTop为负数的情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在开发使用uni-app时,遇到scroll-view组件在iOS系统下滚动到顶部时scrollTop出现负数的情况,确实是一个需要细致处理的问题。这通常是由于平台差异或组件实现上的细节差异引起的。虽然无法直接提供修改uni-app源码的建议,但可以通过一些代码技巧来规避或处理这个问题。以下是一个示例代码,展示如何通过监听滚动事件并手动调整scrollTop值来避免负数的情况。

<template>
  <view>
    <scroll-view
      scroll-y="true"
      @scroll="handleScroll"
      :scroll-top="scrollTop"
      ref="scrollView"
      style="height: 300px;">
      <view v-for="item in items" :key="item" class="scroll-item">
        {{ item }}
      </view>
    </scroll-view>
    <button @click="scrollToTop">Scroll to Top</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`),
      scrollTop: 0,
      minScrollTop: 0 // 用于存储检测到的最小scrollTop值,避免负数
    };
  },
  methods: {
    handleScroll(event) {
      const { scrollTop } = event.detail;
      // 更新最小scrollTop值,确保不会低于0
      this.minScrollTop = Math.max(this.minScrollTop, scrollTop);
      // 如果检测到scrollTop变为负数,则手动设置为0或之前的最小值
      if (scrollTop < 0) {
        this.scrollTop = this.minScrollTop || 0;
      } else {
        this.scrollTop = scrollTop;
      }
    },
    scrollToTop() {
      this.$refs.scrollView.scrollTop = 0;
      // 重置最小scrollTop值,因为已经手动滚动到顶部
      this.minScrollTop = 0;
    }
  }
};
</script>

<style>
.scroll-item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
</style>

在上述代码中,我们做了以下几点:

  1. 监听滚动事件:通过@scroll="handleScroll"监听scroll-view的滚动事件。
  2. 维护最小scrollTop:在handleScroll方法中,使用minScrollTop变量来存储检测到的最小scrollTop值,确保它不会低于0。
  3. 调整scrollTop:当检测到scrollTop变为负数时,手动将其设置为minScrollTop(或0,如果minScrollTop尚未被设置)。
  4. 提供手动滚动到顶部的方法scrollToTop方法用于手动将scroll-view滚动到顶部,并重置minScrollTop值。

这种方法虽然不能直接解决uni-app或iOS系统的根本问题,但可以在应用层面有效地规避scrollTop为负数的情况。

回到顶部