uni-app scroll-view添加同样高度的内容@scroll返回的deltaY不一致

开发环境	版本号	项目创建方式
Windows	3.4.18	HBuilderX

使用scroll-view开发聊天窗口功能，发送的消息是同样的高度，但是再发送出来的内容高度，大于scroll-view获取的高度的时候，@scroll返回的deltaY不一致

上述是获取内容的高度，通过高度来改变scrollTop属性，来进行滚动的控制

let element = '.chat-item'  
let query = uni.createSelectorQuery()  
query.in(instance).selectAll(element).boundingClientRect()  
query.exec(eles => {  
    if (Array.isArray(eles) && eles[0].length > 0) {  
        console.log(eles[0])  
        if(openStatus.value) {  
            // 初始化  
            scrollTop.value = 35  
            eles[0].forEach(item => {  
                scrollTop.value += item.height  
            })  
            openStatus.value = false  
        } else {  
            scrollTop.value += eles[0][eles[0].length - 1].height  
            console.log('自动滚动到底部')  
        }  
        console.log(scrollTop.value)  
    }  
})

phonegap100 1楼•11 天前

在 uni-app 中使用 scroll-view 组件时，如果你发现 @scroll 事件返回的 deltaY 值不一致，可能有以下几个原因：

1. 内容高度不一致

即使你添加了“同样高度”的内容，实际渲染时可能会因为样式、布局、字体大小、行高等因素导致内容高度不完全一致。
检查每个内容项的实际高度，确保它们确实一致。

2. 滚动容器的布局问题

scroll-view 的布局可能会影响 deltaY 的计算。例如，如果 scroll-view 的父容器有 padding 或 margin，可能会影响滚动行为。
确保 scroll-view 的布局是预期的，并且没有外部因素影响滚动。

3. 滚动事件的触发频率

@scroll 事件的触发频率可能较高，尤其是在快速滚动时。每次触发时，deltaY 可能会因为滚动的速度和方向不同而有所变化。
如果你需要更稳定的 deltaY 值，可以考虑在事件处理函数中进行一些平滑处理或去抖动。

4. 平台差异

uni-app 是一个跨平台框架，不同平台（如微信小程序、H5、App）对 scroll-view 的实现可能有所不同，导致 deltaY 的行为不一致。
检查在不同平台上的表现，确保问题不是由平台差异引起的。

5. 滚动条的位置

deltaY 表示的是滚动的增量，而不是绝对位置。如果滚动条的位置不同，deltaY 的值也会不同。
确保在每次滚动时，滚动条的起始位置是一致的。

6. 事件处理函数的实现

检查你的 @scroll 事件处理函数，确保没有逻辑错误或对 deltaY 的误用。
例如，如果你在事件处理函数中修改了 scroll-view 的内容或布局，可能会影响后续的 deltaY 值。

示例代码

以下是一个简单的 scroll-view 示例，你可以参考并检查你的实现：

<template>
  <scroll-view
    scroll-y
    @scroll="handleScroll"
    style="height: 300px; border: 1px solid #ccc;"
  >
    <view
      v-for="(item, index) in items"
      :key="index"
      style="height: 50px; line-height: 50px; text-align: center; border-bottom: 1px solid #eee;"
    >
      Item {{ index + 1 }}
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      items: Array(20).fill(null) // 生成20个相同高度的内容项
    };
  },
  methods: {
    handleScroll(event) {
      console.log('deltaY:', event.detail.deltaY);
    }
  }
};
</script>