组件用.vue还是.js

vue-list-scroller (vue-list-scroller)

It can help with creating Twitter-like feed with thousands of items. It renders only visible part of the list.

它可以帮助创建具有数千个项目的类似Twitter的feed。 它仅呈现列表的可见部分。

笔记 (Notes)

• Only page mode. It does not work inside an overflow container

  仅页面模式。 它在溢出容器内不起作用

• Uses ResizeObserver

  使用ResizeObserver

• Items can have any size and change dynamically

  物品可以有任意大小并可以动态更改

• Items can have margins

  物品可以有边距

• Supports infinite scroll

  支持无限滚动

用法 (Usage)

Add package to your project

将包添加到您的项目

npm install vue-list-scroller --save

Create item component

创建项目组件

<template>
  <div>{{ 'Item ' + index + ' ' + data.text }}</div>
</template>

<script>
export default {
  props: {
    data: Object,
    index: Number,
  },
}
</script>

Add ListScroller component to your project

将ListScroller组件添加到您的项目

<template>
  <div>
    <list-scroller :itemComponent="item" :itemsData="items" :itemHeight="350" />
  </div>
</template>

<script>
import ListScroller from 'vue-list-scroller'
import Item from './item'

export default {
  components: { ListScroller },
  data() {
    return {
      items: [{ text: 'first' }, { text: 'second' }],
      item: Item,
    }
  },
}
</script>

例 (Example)

You can clone this project and start example locally with these commands. It's in the dev folder.

您可以克隆该项目并使用这些命令在本地启动示例。 在dev文件夹中。

npm install
npm run serve

道具 (Props)

• itemsData: array of the data that is passed to items

  itemsData ：传递给items的数据数组

• itemHeight: approximate item height in pixels. it's used only at first rendering

  itemHeight ：大约项目高度，以像素为单位。 仅在第一次渲染时使用

• itemComponent: vue js item component

  itemComponent ：vue js项目组件

• renderViewports: height of the rendered part relative to viewport height. For example, if it's set to 5 and window inner height is 400, it will render 800 pixels before and after visible part of the list

  renderViewports ：相对于视口高度的渲染零件的高度。 例如，如果将其设置为5且窗口内部高度为400，则它将在列表的可见部分之前和之后渲染800像素

大事记 (Events)

• bottom: emits when the last item is rendered. Used for infinite scroll

  bottom ：渲染最后一个项目时发出。 用于无限滚动

类似项目 (Similar projects)

• vue-virtual-scroll-list

  虚拟虚拟滚动列表

• vue-virtual-scroller

  虚拟虚拟卷轴

翻译自: https://vuejsexamples.com/simple-and-easy-to-use-vue-js-component-for-efficient-rendering-large-lists/

组件用.vue还是.js