virtual-seamless-scrolling

介绍

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

软件架构

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

安装教程

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

或者

npm install virtual-seamless-scrolling -S

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

组件说明

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

使用说明demo 详情请查看 examples/App.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上提出,后续会新增和优化