q-scroll-list

Vue 3 + Typescript + Vite

数据列表向上滚动、无感更新数据

安装

npm https://www.npmjs.com/package/q-scroll-list

npm install q-scroll-list
or
yarn add q-scroll-list

main.js

import QScrollList from 'q-scroll-list';
import "q-scroll-list/index.css";
const app = createApp(App);
app.use(QScrollList);

//简单使用
<script setup lang="ts">
import { ref } from "vue";
let data = ref([] as any[]);
let scrollList = ref(null);
let config = ref({
  header: {
    data: ["名称", "类型", "状态", "情况", "日期"],
    height: 40,
    color: "#fff",
    borderColor: "pink",
    borderSize: 1,
  },
  data: data,
  pageSize: 7,
});
const selectItem = (id: string, rowIndex: number, colIndex: number) => {
  console.log(id, rowIndex, colIndex);
};
data.value = [
  { id: "1", value: [1, 2, 3, 4, 5] },
  { id: "2", value: [2, 2, 3, 4, 5] },
  { id: "3", value: [3, 2, 3, 4, 5] },
  { id: "4", value: [4, 2, 3, 4, 5] },
  { id: "5", value: [5, 2, 3, 4, 5] },
  { id: "6", value: [6, 2, 3, 4, 5] },
  { id: "7", value: [7, 2, 3, 4, 5] },
  { id: "8", value: [8, 2, 3, 4, 5] },
  { id: "9", value: [9, 2, 3, 4, 5] },
  { id: "10", value: [10, 2, 3, 4, 5] },
  { id: "11", value: [11, 2, 3, 4, 5] },
  { id: "12", value: [12, 2, 3, 4, 5] },
  { id: "13", value: [13, 2, 3, 4, 5] },
  { id: "14", value: [14, 2, 3, 4, 5] },
  { id: "15", value: [15, 2, 3, 4, 5] },
  { id: "16", value: [16, 2, 3, 4, 5] },
];
setTimeout(() => {
  //一步更新数据
  (scrollList.value as any).pushData([
    { id: "17", value: [17, 22, 23, 24, 25] },
    { id: "18", value: [18, 22, 23, 24, 25] },
    { id: "19", value: [19, 22, 23, 24, 25] },
    { id: "20", value: [20, 22, 23, 24, 25] },
  ]);
}, 10000);
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div class="bg" style="width:500px;height:300px;margin:0 auto">
    <QScrollList :config="config" @selectItem="selectItem" ref="scrollList"></QScrollList>
  </div>
</template>

事件

| 回调方法 | 返回参数 | 参数类型 | 返回说明 | | ------------- | ------------------------ | --------------- | ------------- | | @selectItem | (id,rowIndex,colIndex) | (int,int,int) | 点击行返回 id | | pushData | (data) | (array) | 异步更新数据 |

参数 config

| 参数名 | 参数类型 | 说明 | | | ------------- | -------------- | ------------------------------------------- | --- | | header | HeaderObject | 表头配置 | | type | string | 单行滚动：single 分页滚动：page | | data | object[] | 列表数据{id:'xx',value:['xx','hh']} | | pageSize | number | 一页展示多少行 | | columnWidth | number[] | 每列的间隔[,,20,]这样第三列为 20,其他列等分 | | waitTime | number | 动画执行间隔时间 | | selectBg | string | 鼠标点击行的背景颜色 | | singleBg | string | 奇行背景颜色 | | doubleBg | string | 偶行背景颜色 |

注意：
  data 必须包含id及value
  value为每列的数据可以为html字符

参数 HeaderObject

| 参数名 | 参数类型 | 说明 | | | ------------- | ---------- | ----------------------- | --- | | size | number | 字体大小 | | color | string | 字体颜色 | | data | string[] | 表头数据['姓名','公司'] | | height | number | 表头行高 | | borderColor | number[] | 表头下的 border 颜色 | | borderSize | number | 表头下的 border 大小 |

图片

Customize configuration

See Configuration Reference.