uniapp 懒加载的实现方法

在uniapp中如何实现懒加载功能？目前我需要在列表页面中实现图片和数据的懒加载，但不知道具体的实现方法。请问有哪些推荐的方式或组件可以使用？是否需要结合scroll-view或者第三方插件来实现？希望能提供一个具体的代码示例或实现思路。

2 回复

uniapp中懒加载可通过<image>标签的lazy-load属性实现，设置为true即可。列表数据较多时，结合onReachBottom监听触底加载更多数据，优化性能。


在 UniApp 中，懒加载主要用于优化长列表或图片的渲染性能，避免一次性加载过多内容导致页面卡顿。以下是常见的实现方法：

1. 列表懒加载（滚动加载更多）

使用 scroll-view 组件或页面 onReachBottom 方法监听滚动到底部事件，动态加载数据。

示例代码（使用 onReachBottom）：

export default {
  data() {
    return {
      list: [],       // 列表数据
      page: 1,        // 当前页码
      hasMore: true   // 是否还有更多数据
    }
  },
  onReachBottom() {
    if (this.hasMore) {
      this.loadMoreData()
    }
  },
  methods: {
    async loadMoreData() {
      try {
        const res = await this.$http.get('/api/list', { page: this.page })
        if (res.data.length > 0) {
          this.list = [...this.list, ...res.data]
          this.page++
        } else {
          this.hasMore = false
        }
      } catch (error) {
        console.error('加载失败', error)
      }
    }
  }
}

2. 图片懒加载

使用 image 组件的 lazy-load 属性（仅微信小程序、App 支持）。

示例代码：

<image 
  lazy-load 
  :src="item.imgUrl" 
  mode="aspectFill"
></image>

3. 条件渲染优化

结合 v-if 或 uni.createIntersectionObserver 实现元素进入可视区域时再渲染。

示例代码（使用 IntersectionObserver）：

// 在组件中
mounted() {
  this.observer = uni.createIntersectionObserver(this)
  this.observer.relativeToViewport()
    .observe('.lazy-item', (res) => {
      if (res.intersectionRatio > 0) {
        // 元素进入可视区域，加载内容
        this.isVisible = true
      }
    })
},
beforeDestroy() {
  this.observer.disconnect()
}

注意事项：

  • 列表懒加载需配合分页接口使用
  • 图片懒加载注意设置图片占位高度避免布局抖动
  • 复杂场景可考虑使用 uni.$emit/uni.$on 进行组件间通信

这些方法能有效提升页面性能，特别是在处理大量数据时效果显著。

回到顶部