uniapp如何做图片懒加载

在uniapp中，可以通过以下步骤实现图片懒加载：

1. 安装uniapp提供的lazyload插件，可以通过npm安装。

2. 在需要懒加载的图片上添加v-lazy指令，例如：

<template>
  <img v-lazy="imgUrl" />
</template>

其中imgUrl为图片的地址。

3. 在页面中引入lazyload插件，并进行配置：

<template>
  <view></view>
</template>
<script>
  import lazyload from 'uni-vue-lazyload';
  export default {
    components: {},
    data() {},
    methods: {},
    onLoad() {},
    onReady() {},
    onShow() {},
    onHide() {},
    onUnload() {},
    directives: {
      lazy: lazyload.directive
    },
    uniPlugins: {
      lazyload: lazyload.uni
    },
    computed: {},
    watch: {}
  };
</script>

4. 配置lazyload插件的参数，例如：

<template>
  <view></view>
</template>
<script>
  import lazyload from 'uni-vue-lazyload';
  export default {
    components: {},
    data() {
      return {
        lazyload: {
          loading: 'https://xxxx/loading.gif',
          error: 'https://xxxx/error.png',
          attempt: 1,
          listenEvents: [ 'scroll', 'touchmove' ]
        }
      };
    },
    methods: {},
    onLoad() {},
    onReady() {},
    onShow() {},
    onHide() {},
    onUnload() {},
    directives: {
      lazy: lazyload.directive
    },
    uniPlugins: {
      lazyload: lazyload.uni
    },
    computed: {},
    watch: {}
  };
</script>

其中，loading为加载中的占位图片地址，error为加载失败的占位图片地址，attempt为尝试加载次数，listenEvents为监听事件。

这样就可以实现uniapp中的图片懒加载了。