elementui InfiniteScroll 无限滚动，在移动端会出现的问题

在移动端使用 Element UI 的 InfiniteScroll 无限滚动组件时，可能会遇到以下问题：

1. 滚动不稳定：在移动端触摸滚动时可能会出现卡顿或不稳定的情况。
2. 滚动不触发加载：用户在滚动时没有触发加载更多数据的事件。
3. 性能问题：在移动端可能会出现性能问题，尤其是在处理大量数据时。

解决方法：

1. 优化滚动性能：使用 CSS 属性如 overflow: auto; 和 -webkit-overflow-scrolling: touch; 来优化滚动性能。
2. 监听正确的滚动事件：确保监听的是容器的正确滚动事件，比如监听滚动容器的 scroll 或 touchmove 事件。
3. 使用节流和防抖技术：对触发加载的函数使用节流（Throttle）或防抖（Debounce）技术，以减少函数被频繁调用的情况。
4. 适配移动端触摸事件：确保组件能够正确处理移动端的触摸事件，包括 touchstart, touchmove, touchend 等。
5. 提供足够的缓冲区：为用户提供足够的滚动距离缓冲区，以确保即使在快速滚动时也能触发加载事件。

示例代码：

<el-scrollbar
  class="infinite-scroll-container"
  @scroll.native.passive="onScroll"
>
  <!-- 内容 -->
</el-scrollbar>
 
<script>
export default {
  methods: {
    onScroll(event) {
      const container = event.target;
      if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10) {
        // 距离底部10px时加载更多
        this.loadMore();
      }
    },
    loadMore() {
      // 加载更多数据的逻辑
    }
  }
}
</script>
 
<style>
.infinite-scroll-container {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
</style>

在这个示例中，我们监听了原生的滚动事件，并且使用了一个10像素的缓冲区来判断是否到达了滚动容器的底部，从而触发加载更多数据的操作。同时，我们还优化了移动端的滚动性能。