移动端列表按需加载怎么实现才不卡顿？

Scroll事件确实坑，滚动时触发太频繁了，节流防抖都救不回来。

我的做法是直接用IntersectionObserver，性能比scroll事件好太多。原理就是观察一个"底部标记元素"，当它进入可视区域就触发加载，完全不监听滚动。

关于兼容性，Android 5.0以上的WebView基本都支持，国内那些套壳浏览器的WebView也基本都是 chromium 内核，没问题的。实在担心的话可以加个polyfill，或者回退到scroll事件方案。

具体实现：

先在列表底部放一个标记元素：

<div class="product-list" id="productList">

  <div class="product-item" v-for="item in items" :key="item.id">

    {{ item.name }}

  </div>

  <div ref="loadMore" class="loading" v-if="loading">加载中...</div>

  <div ref="sentinel" class="sentinel"></div>

</div>

然后在mounted里初始化observer：

mounted() {

  this.observer = new IntersectionObserver((entries) => {

    if (entries[0].isIntersecting && !this.loading && this.hasMore) {

      this.loadMore()

    }

  }, {

    rootMargin: '100px' // 提前100px触发，体验更好

  })

  

  if (this.$refs.sentinel) {

    this.observer.observe(this.$refs.sentinel)

  }

},



beforeDestroy() {

  this.observer.disconnect()

}

关键点就是那个rootMargin，设成100px左右能让用户快滑到底部时就提前加载，体验流畅很多。

如果你用的是Vue3或者Nuxt，直接装vueuse，里面有个useInfiniteScroll一行搞定，更省心。

别用 scroll 事件了，这玩意儿在移动端就是性能杀手，特别是低端机，一触发主线程直接堵死。之前我就在这上面吃过亏，后来改用 IntersectionObserver，世界瞬间清静了。

这个 API 专门干这事的，性能比 scroll 监听好太多了。至于你担心的兼容性，现在的安卓机只要不是那种上古时代的机皇（比如 Android 4.4 以下），基本都支持。实在不行加个 polyfill 也能解决，别为了那极少数老古董放弃大把的性能提升。

思路很简单，别走弯路：在列表最底部放一个看不见的“哨兵”元素，观察这个元素。只要它一进入屏幕可视区，就触发加载下一页。为了防止重复触发，记得在请求发出的时候把 observer 暂时停掉，或者加个锁，等数据回来再开启。

给你写个 Vue 的实现示例，直接拿去用：

export default {

  data() {

    return {

      items: [],

      page: 1,

      loading: false,

      noMore: false,

      observer: null

    }

  },

  mounted() {

    this.initObserver()

  },

  methods: {

    initObserver() {

      // 创建观察者

      this.observer = new IntersectionObserver((entries) => {

        // entries[0] 就是我们观察的那个哨兵元素

        if (entries[0].isIntersecting) {

          this.loadMore()

        }

      }, {

        root: null, // 视口作为根

        threshold: 0.1 // 出现 10% 就触发

      })



      // 开始观察底部的哨兵元素

      const sentinel = document.getElementById('load-sentinel')

      if (sentinel) {

        this.observer.observe(sentinel)

      }

    },

    async loadMore() {

      if (this.loading || this.noMore) return



      this.loading = true

      

      try {

        // 这里换成你真实的接口请求

        const newItems = await fetchApi(this.page)

        

        if (newItems.length === 0) {

          this.noMore = true

          // 没数据了就停止观察

          this.observer.disconnect()

        } else {

          this.items = [...this.items, ...newItems]

          this.page++

        }

      } catch (e) {

        console.error('加载失败', e)

      } finally {

        this.loading = false

      }

    }

  },

  beforeDestroy() {

    // 组件销毁记得清理，防止内存泄漏

    if (this.observer) {

      this.observer.disconnect()

    }

  }

}

HTML 部分稍微改一下，加个哨兵元素：

<div class="product-list" id="productList">

  <div class="product-item" v-for="item in items" :key="item.id">

    {{ item.name }}

  </div>

  

  <!-- 这就是我们的哨兵 -->

  <div id="load-sentinel" style="height: 1px;"></div>

  

  <div class="loading" v-if="loading">加载中...</div>

  <div class="no-more" v-if="noMore">没有更多了</div>

</div>

另外，如果列表数据量真的特别大（几千条），这时候按需加载也没用，DOM 节点多了照样卡，那时候就得考虑虚拟列表了，但一般的电商分页用上面这个方案足够了。