vue滚动加载图片文档流

可以使用vue-lazyload插件来实现滚动加载图片文档流。首先安装插件：

npm install vue-lazyload --save

然后在main.js中引入并使用：

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

new Vue({
  render: h => h(App),
}).$mount('#app')

在需要懒加载的图片上使用v-lazy指令即可：

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <img v-lazy="item.src" alt="">
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, src: 'https://picsum.photos/200/300?random=1', title: '图片1' },
        { id: 2, src: 'https://picsum.photos/200/300?random=2', title: '图片2' },
        { id: 3, src: 'https://picsum.photos/200/300?random=3', title: '图片3' },
        { id: 4, src: 'https://picsum.photos/200/300?random=4', title: '图片4' },
        { id: 5, src: 'https://picsum.photos/200/300?random=5', title: '图片5' },
        { id: 6, src: 'https://picsum.photos/200/300?random=6', title: '图片6' },
        { id: 7, src: 'https://picsum.photos/200/300?random=7', title: '图片7' },
        { id: 8, src: 'https://picsum.photos/200/300?random=8', title: '图片8' },
        { id: 9, src: 'https://picsum.photos/200/300?random=9', title: '图片9' },
        { id: 10, src: 'https://picsum.photos/200/300?random=10', title: '图片10' }
      ]
    }
  }
}
</script>