uniapp左右两个scroll-view同步滚动不平齐如何解决

在uniapp中，我实现了左右两个scroll-view的同步滚动，但发现滚动时两侧内容无法完全对齐，会出现错位现象。尝试过绑定相同的scroll-top值和scroll事件，依然存在几像素的偏差。请问如何让两个scroll-view在同步滚动时保持严格对齐？尤其当内容高度不同或存在图片等异步加载元素时，该如何处理？

eggper 1楼

设置两个scroll-view的scroll-top属性绑定同一个变量，通过监听scroll事件实时更新scroll-top值，确保滚动同步。

h691938207 2楼作者

在UniApp中，实现左右两个scroll-view同步滚动时出现不平齐的问题，通常是由于滚动事件触发时机、内容高度不一致或滚动计算不精确导致的。以下是解决方案：

1. 确保内容高度一致

左右两个scroll-view的内容高度必须相同，否则滚动比例会不一致。检查并确保两侧内容高度一致。

2. 使用相同的滚动比例计算

在滚动事件中，通过计算滚动比例来同步两个scroll-view的滚动位置。示例代码如下：

<template>
  <view class="container">
    <!-- 左侧scroll-view -->
    <scroll-view 
      scroll-y 
      :scroll-top="leftScrollTop" 
      @scroll="onLeftScroll"
      class="left-scroll"
    >
      <!-- 左侧内容 -->
      <view v-for="item in leftList" :key="item.id" class="item">
        {{ item.text }}
      </view>
    </scroll-view>

    <!-- 右侧scroll-view -->
    <scroll-view 
      scroll-y 
      :scroll-top="rightScrollTop" 
      @scroll="onRightScroll"
      class="right-scroll"
    >
      <!-- 右侧内容 -->
      <view v-for="item in rightList" :key="item.id" class="item">
        {{ item.text }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      leftScrollTop: 0,
      rightScrollTop: 0,
      leftList: [...], // 左侧数据
      rightList: [...], // 右侧数据
      isScrolling: false // 防止滚动循环触发
    };
  },
  methods: {
    onLeftScroll(e) {
      if (this.isScrolling) return;
      this.isScrolling = true;
      
      const scrollTop = e.detail.scrollTop;
      const leftHeight = this.getScrollHeight('left'); // 左侧内容总高度
      const rightHeight = this.getScrollHeight('right'); // 右侧内容总高度
      
      // 计算右侧应滚动的位置
      this.rightScrollTop = (scrollTop / leftHeight) * rightHeight;
      
      this.$nextTick(() => {
        this.isScrolling = false;
      });
    },
    
    onRightScroll(e) {
      if (this.isScrolling) return;
      this.isScrolling = true;
      
      const scrollTop = e.detail.scrollTop;
      const leftHeight = this.getScrollHeight('left');
      const rightHeight = this.getScrollHeight('right');
      
      // 计算左侧应滚动的位置
      this.leftScrollTop = (scrollTop / rightHeight) * leftHeight;
      
      this.$nextTick(() => {
        this.isScrolling = false;
      });
    },
    
    // 获取scroll-view内容高度（需在mounted后调用）
    getScrollHeight(side) {
      // 实际项目中可通过uni.createSelectorQuery()获取真实高度
      // 这里假设左右内容高度已知或通过计算得到
      return side === 'left' ? this.leftList.length * 50 : this.rightList.length * 50; // 示例高度
    }
  }
};
</script>

<style>
.container {
  display: flex;
  height: 100vh;
}
.left-scroll, .right-scroll {
  flex: 1;
  height: 100%;
}
.item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
</style>

3. 使用`uni.createSelectorQuery()`获取真实高度

如果内容高度动态变化，使用uni.createSelectorQuery()获取精确高度，替换示例中的getScrollHeight方法。

4. 优化滚动性能

使用isScrolling标志避免滚动事件循环触发。
在$nextTick中重置标志，确保DOM更新完成。

5. 考虑使用第三方组件

如果上述方法仍不理想，可考虑使用社区组件（如uni-sync-scroll）简化实现。