# virtual-list-scroll

**Repository Path**: strivelei/virtual-list-scroll

## Basic Information

- **Project Name**: virtual-list-scroll
- **Description**: vue3 虚拟滚动列表,可以展示大量列表 
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2023-12-04
- **Last Updated**: 2025-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# virtual-seamless-scrolling

#### 介绍

vue3 虚拟无缝滚动列表,可以展示大量列表 其他框架的请自行下载源码进行修改

#### 软件架构

##### 支持vue2.7+ vue2.7 以下需安装 `` cnpm i @vue/composition-api -S ``

#### 安装教程  

```bash
npm install git+https://gitee.com/strivelei/virtual-list-scroll.git -S

```
或者
```bash
npm install virtual-seamless-scrolling -S

pnpm install virtual-seamless-scrolling -S
cnpm install virtual-seamless-scrolling -S

```

### 组件说明

- **不定高无限滚动加载虚拟列表**的实现，控制列表渲染数据量的同时实现列表**无限滚动**

<table>
  <tr>
    <th>参数/事件</th>
    <th>说明</th>
    <th>类型</th>
    <th>默认值</th>
  </tr>
  <tr>
    <td>
      <b>dataKey</b>
    </td>
    <td>从data-sources中的每个数据对象获取唯一键。或者使用每个数据源调用函数并返回其唯一键。其值在数据源中必须是唯一的，用于标识每一项的尺寸。</td>
    <td>String</td>
    <td>id</td>
  </tr>
<tr>
    <td>
      <b>dataSource</b>
    </td>
    <td>传入的数组</td>
    <td>Array</td>
    <td>必传</td>
  </tr>
  <tr>
    <td>
      <b>loading</b>
    </td>
    <td>分页加载loading状态</td>
    <td>Boolean</td>
    <td>是否加载中 默认 false 只有为flase的时候才开始滚动</td>
  </tr>
<tr>
		<td>
			<b>interval</b>
		</td>
		<td>单个滚动完成的停留间隔 单位毫秒</td>
		<td>Number</td>
		<td>0</td>
	</tr>
<tr>
		<td>
			<b>refresh</b>
		</td>
		<td>true:是否在数据源改变后重新渲染,false: 是追加数据</td>
		<td>Boolean</td>
		<td>false</td>
	</tr>
	<tr>
		<td>
			<b>@scrollEnd</b>
		</td>
		<td>列表滚动到底部触发的方法</td>
		<td>Function</td>
		<td>-</td>
	</tr>
    <tr>
		<td>
			<b>@lineScrollEnd</b>
		</td>
		<td>单行滚动完成触发的方法</td>
		<td>Function</td>
		<td>-</td>
	</tr>

    
</table>

#### 使用说明demo 详情请查看 examples/App.vue

```vue

<template>
  <template>
    <h1>目前数据量{{dataSource.length}}</h1>
    <div class="virtual-list-content">
      <ListHeader :titleList="titleList"/>
      <VirtualListScroll
          data-key="project_id"
          :data-source="dataSource"
          :loading="loading"
          :interval="3000"
          @scroll-end="scrollEnd"
          @line-scroll-end="lineScrollEnd"
          class="virtual-list"
      >
        <template #item="{ item }">
          <el-tooltip placement="top" color="rgba(73, 146, 255, 0.8)"      :popper-options="{
      modifiers: [
        {
          name: 'computeStyles',
          options: {
            adaptive: false,
            enabled: false,
          },
        },
      ],
    }">
            <template #content>
              <span>项目名：{{ item.name }}</span>
            </template>
            <div class="virtual-list-item" @click="handelClick(<DataItem>item)">
              <span class="virtual-list-item-col">{{ item.name }}</span>
              <span class="virtual-list-item-col">{{ item.influence }}</span>
              <span class="virtual-list-item-col">{{ item.trend }}</span>
              <span class="virtual-list-item-col">{{ item.response }}</span>
              <span class="virtual-list-item-col">{{ item.activity }}</span>
              <span class="virtual-list-item-col">{{ item.github }}</span>
            </div>
          </el-tooltip>
        </template>
      </VirtualListScroll>


    </div>
  </template>
</template>

<script setup lang="ts">
  import {VirtualListScroll, ListHeader, TitltListItem} from 'virtual-seamless-scrolling'
  // 注意样式不用忘记引用了
  import 'virtual-seamless-scrolling/dist/style.css';
  import {ref} from "vue";

  // 列表字段
  const titleList: TitltListItem[] = [
    {
      label: '项目名',
      width: '20%'
    },
    {
      label: '影响力',
      width: '16%'
    },
    {
      label: '发展趋势',
      width: '16%'
    },
    {
      label: '社区反应',
      width: '16%'
    },
    {
      label: '开发活跃度',
      width: '16%'
    },
    {
      label: '指数',
      width: '16%'
    }
  ];
  const loading = ref(true)
  type DataItem = {
    project_id: number;
    influence: string;
    response: string;
    activity: string;
    trend: string;
    github: string;
    name: string;
  };
  // 数据员
  const dataSource = ref<DataItem[]>([])
  // 模拟请求
  setTimeout(() => {


    for (let i = 0; i < 35; i++) {
      dataSource.value.push({
        "project_id": i,
        "influence": (58.42 * (i /10) + ''),
        "response": "31.40",
        "activity": "79.34",
        "trend": "68.78",
        "github": "60.31",
        "name": "Automattic/wp-calypso" + i
      })
    }
    loading.value = false
  }, 100)

  /**
   * 滚动完成
   */
  const scrollEnd = () => {
    // 滚动完成后复制一份数据
    console.log('列表滚动到底部触发的方法')
  }


  /**
   * 单行滚动完成
   */
  const lineScrollEnd =() => {
    console.log('单行滚动完成')
  }
  const handelClick = (item: DataItem) => {
    console.log('点击事件', item)
  }
</script>


<style scoped lang="scss">

  .virtual-list-content {
    display: flex;
    flex-direction: column;
    height: 500px;
    padding: 0 8px;
    background-color: #0a54ea;

    .virtual-list-item {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 4px;
      //height: 80px;
      color: rgb(255 255 255);
      cursor: pointer;

      &:hover {
        color: #68d8ff;
        background: rgb(255 255 255 / 10%);
      }

      &-col {
        width: 16%;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &-col:nth-child(1) {
        width: 19.5%;
        text-align: left;
      }
    }
  }
</style>


```



# 如果有其他需求可以在gitee上提出,后续会新增和优化