用于 Vue、Svete.js 和 React.js 的轻量级和高性能延迟加载列表库。

安装和下载：

# Yarn$ yarn add lazy-load-list# NPM$ npm i lazy-load-list

使用：

1. 导入并注册延迟加载列表组件。

import LazyList from 'lazy-load-list/vue';

export default {  components: {    LazyList,    // ...  },  // ...}

2. 为您的应用添加延迟加载列表组件。

<LazyList  :data="colors"  :itemsPerRender="15"  containerClasses="list"  defaultLoadingColor="#222">  <template v-slot="{item}">    <div @click="copyColor(item.hex)" class="item" :style="`background-color: ${item.hex}`">      <div class="copy">{{ item.hex }}</div>    </div>  </template></LazyList>

export default {  components: {    LazyList,  },  data(){    return {      // 100 items of fruits      colors,      copied:''    }  },  methods:{    copyColor(color){      window.navigator.clipboard.writeText(color)      this.showCopiedText(color)    },    showCopiedText(color){      this.copied = color      setTimeout(() => {        this.copied = ''      }, 800);    }  }}

3.所有可用的组件道具。

data:{  type: Array,  default: () => [],},itemsPerRender:{  type: Number,  default: 3,},height:{  type: Number,  default: 480,},containerClasses:{  type: String,  default: '',},defaultLoading:{  type: Boolean,  default: true,},defaultLoadingColor:{  type: String,  default: '#18191A',},