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.