博客站

在 UniApp 中，音频懒加载是优化页面性能的重要手段之一，特别是在长列表或音频较多的场景中。通过懒加载，可以延迟加载非可视区域的音频，减少初始加载时间。以下是 UniApp 处理音频懒加载的常用方法：

一、手动实现音频懒加载

由于 UniApp 的 audio 组件没有内置的懒加载功能，可以通过监听滚动事件手动实现音频懒加载。

1. 监听滚动事件

• 示例：

  <template>
    <scroll-view scroll-y style="height: 100vh;" @scroll="onScroll">
      <view v-for="(item, index) in list" :key="index" class="item">
        <audio
          v-if="item.visible"
          :src="item.src"
          controls
          style="width: 100%;"
        ></audio>
      </view>
    </scroll-view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        list: [
          { src: 'https://example.com/audio1.mp3', visible: false },
          { src: 'https://example.com/audio2.mp3', visible: false },
          { src: 'https://example.com/audio3.mp3', visible: false }
        ]
      };
    },
    methods: {
      onScroll(e) {
        const scrollTop = e.detail.scrollTop;
        const windowHeight = uni.getSystemInfoSync().windowHeight;
        this.list.forEach((item, index) => {
          const itemTop = index * 100; // 每个音频的高度为 100px
          if (itemTop < scrollTop   windowHeight && itemTop   100 > scrollTop) {
            item.visible = true;
          }
        });
      }
    }
  };
  </script>
  

2. 优化性能

• 使用 IntersectionObserver API 实现更高效的懒加载。
• 示例：

  <template>
    <view>
      <view v-for="(item, index) in list" :key="index" class="item">
        <audio
          v-if="item.visible"
          :src="item.src"
          controls
          style="width: 100%;"
        ></audio>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        list: [
          { src: 'https://example.com/audio1.mp3', visible: false },
          { src: 'https://example.com/audio2.mp3', visible: false },
          { src: 'https://example.com/audio3.mp3', visible: false }
        ]
      };
    },
    mounted() {
      const observer = uni.createIntersectionObserver(this);
      this.list.forEach((item, index) => {
        observer.relativeToViewport().observe(`.item-${index}`, (res) => {
          if (res.intersectionRatio > 0) {
            item.visible = true;
          }
        });
      });
    }
  };
  </script>
  
  <style>
  .item {
    height: 100px;
  }
  </style>
  

二、使用第三方懒加载库

如果需要更复杂的懒加载功能，可以使用第三方懒加载库，如 vue-lazyload。

1. 安装 vue-lazyload

• 安装 vue-lazyload：

  npm install vue-lazyload
  

2. 在 UniApp 中使用

• 示例：

  import Vue from 'vue';
  import VueLazyload from 'vue-lazyload';
  
  Vue.use(VueLazyload, {
    preLoad: 1.3,
    error: 'https://example.com/error.png',
    loading: 'https://example.com/loading.gif',
    attempt: 1
  });
  
  export default {
    data() {
      return {
        list: [
          { src: 'https://example.com/audio1.mp3' },
          { src: 'https://example.com/audio2.mp3' },
          { src: 'https://example.com/audio3.mp3' }
        ]
      };
    }
  };
  

• 在模板中使用：

  <template>
    <view>
      <audio
        v-for="(item, index) in list"
        :key="index"
        v-lazy="item.src"
        controls
        style="width: 100%;"
      ></audio>
    </view>
  </template>
  

三、总结

UniApp 处理音频懒加载的步骤如下：

1. 手动实现懒加载：通过监听滚动事件或使用 IntersectionObserver API 实现懒加载。
2. 使用第三方懒加载库：通过 vue-lazyload 实现更复杂的懒加载功能。

以下是一个完整的 IntersectionObserver 示例：

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="item">
      <audio
        v-if="item.visible"
        :src="item.src"
        controls
        style="width: 100%;"
      ></audio>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { src: 'https://example.com/audio1.mp3', visible: false },
        { src: 'https://example.com/audio2.mp3', visible: false },
        { src: 'https://example.com/audio3.mp3', visible: false }
      ]
    };
  },
  mounted() {
    const observer = uni.createIntersectionObserver(this);
    this.list.forEach((item, index) => {
      observer.relativeToViewport().observe(`.item-${index}`, (res) => {
        if (res.intersectionRatio > 0) {
          item.visible = true;
        }
      });
    });
  }
};
</script>

<style>
.item {
  height: 100px;
}
</style>

通过合理使用这些方法，可以轻松实现 UniApp 中的音频懒加载功能，提升页面性能。