<script>
export default {
name: “VirtualList”,
props: {
templateRender: Function,
list: {
type: Array,
default: () => [],
},
remainList: {
type: Array,
default: () => [],
},
itemHeight: {
type: Number,
default: 34,
},
wrapHeight: {
type: Number,
default: 262,
},
group: {
type: Number,
default: 1,
},},
data() {
return {
pointer: 0,
translateY: 0,
};},
watch: {
remainList: {handler(v) {
this.translateY = v.length * this.itemHeight;
let scrollTop = this.$refs["virtual-list-wrapper"]?.scrollTop;
if (scrollTop !== undefined) {
this.handleScroll({
srcElement: {scrollTop,},
});
}
},
immediate: true,
},},
computed: {
scrollHeight() {
return (// (this.groupRemainList.length + this.groupList.length) * this.itemHeight
this.groupList.length * this.itemHeight
);
},
displayCount() {return Math.ceil(this.wrapHeight / this.itemHeight);
},
groupRemainList() {return this.convertByGroup(this.remainList);
},
groupList() {return this.convertByGroup(this.list);
},
displayList() {
return this.groupList.slice(
this.pointer,
this.pointer + this.displayCount + 1
);
},
remainHeight() {return 0; //this.remainList.length * this.itemHeight;},},
methods: {
convertByGroup(list) {let result = [];
let temp = [];
list.forEach((data) => {temp.push(data);
if (temp.length >= this.group) {result.push(temp);
temp = [];}
});
if (temp.length > 0) {result.push(temp);
}
return result;
},
renderListItem(h, datas, index, startTranslateY, tag) {
return h(
"div",
{
class: "virtual-list-item",
style: {
height: this.itemHeight + "px",
transform: `translate3d(0, ${startTranslateY + index * this.itemHeight}px, 0)`,
display: tag === "remian" ? "none" : "block",
},
key: tag + index,
},
datas.map((data) => {return this.templateRender(h, data, tag);
})
);
},
handleScroll(e) {
let scrollTop = e.srcElement.scrollTop;
// let remainHeight = this.remainList.length * this.itemHeight;
if (scrollTop <= this.remainHeight) {
this.pointer = 0;
this.translateY = this.remainHeight;
} else {
// this.translateY = scrollTop;
this.pointer = Math.floor((scrollTop - this.remainHeight) / this.itemHeight
);
this.translateY = this.pointer * this.itemHeight + this.remainHeight;
}
},},
render(h) {
let children = [
// 要保留的数据
...this.groupRemainList.map((datas, index) => {return this.renderListItem(h, datas, index, 0, "remian");
}),
// 全副数据
...this.displayList.map((datas, index) => {return this.renderListItem(h, datas, index, this.translateY, "list");
}),
];
return h(
"div",
{
class: "virtual-list-wrapper",
style: {height: this.wrapHeight + "px",},
on: {scroll: this.handleScroll,},
ref: "virtual-list-wrapper",
},
[
h(
"div",
{
style: {
height: this.scrollHeight + "px",
position: "relative",
},
},
children
),
]
);},
};
</script>
<style>
.virtual-list-wrapper {
overflow: auto;
}
.virtual-list-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>