List
一个高性能的 List 列表组件,支持无限滚动渲染,添加删除和重排动画 hook 等
基础用法
渲染大量数据
浏览
代码
通过插槽 prop (opens new window)提供了 visibleData 用作数据展示,你可以通过其渲染你想要的列表
<w-list
:originalList="originalList"
:itemHeight="itemHeight"
style="width: 500px; height: 600px;"
>
<template #items="{ visibleData }">
<div
class="item"
v-for="item in visibleData"
:key="item.id"
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }"
>
{{ item.value }}
</div>
</template>
</w-list>
data() {
return {
originalList: [],
itemHeight: 30,
}
},
created() {
for (let i = 0; i < 9999; i++) {
this.originalList.push({ id: i, value: i });
}
}
无限滚动渲染
浏览
代码
<w-list
:originalList="originalList"
:itemHeight="itemHeight"
style="width: 500px; height: 600px;"
@scroll="onScrollEnd"
>
<template #items="{ visibleData }">
<div
class="item"
v-for="(item, index) in visibleData"
:key="item + index"
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }"
>
{{ item }}
</div>
</template>
</w-list>
data() {
return {
originalList: [],
itemHeight: 30,
}
},
created() {
for (let i = 0; i < 29; i++) {
this.originalList.push(1);
}
},
methods: {
onScrollEnd() {
for (let i = 0; i < 5; i++) {
this.originalList.push(1);
}
},
}
列表数据变化回调及动画
浏览
TIP
组件默认不开启动画,如需要给更改列表数据操作添加动画,不要忘记 animation 属性
代码
<div>
<w-button @click="addList" style="margin-bottom: 10px;">add</w-button>
<w-button @click="shuffleList" style="margin-bottom: 10px;">shuffle</w-button>
<w-list
animation
:originalList="originalList"
:itemHeight="itemHeight"
style="width: 500px; height: 600px;"
@added="onAdd"
@removed="onRemove"
@changed="onChange"
>
<template #items="{ visibleData }">
<div
class="item"
v-for="item in visibleData"
:key="item.id"
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }"
>
{{ item.value }}
<w-button type="danger" @click="removeItem(item.id)">remove</w-button>
</div>
</template>
</w-list>
</div>
data() {
return {
originalList: [],
itemHeight: 50,
i: 0,
};
},
created() {
for (let i = 0; i < 29; i++) {
this.originalList.push({ id: i, value: i });
this.i = i;
}
},
methods: {
addList() {
this.i++;
this.originalList.unshift({ id: this.i, value: this.i });
},
removeItem(id) {
this.originalList.splice(
this.originalList.findIndex((item) => id === item.id),
1
);
},
shuffleList() {
const shuffled = [];
while (this.originalList.length > 0) {
const index = this.random(this.originalList.length - 1);
shuffled.push(this.originalList[index]);
this.originalList.splice(index, 1);
}
this.originalList = shuffled;
},
random(max) {
return Math.floor(Math.random() * (max + 1));
},
onAdd() {
this.$toast("Add item successfully", {
autoClose: 3,
});
},
onRemove() {
this.$toast("Remove item successfully", {
autoClose: 3,
});
},
onChange() {
this.$toast("List rearrangement successfully", {
autoClose: 3,
});
},
},
动态高度
有时你的列表元素高度并非静态像素,此时你可以传入 estimatedItemHeight 作为初始化展示高度,在视图更新时组件会还原元素真实高度
浏览
TIP
在元素高度一致时尽量使用性能更好的静态高度
代码
<w-list
:originalList="originalList"
:itemHeight="itemHeight"
:estimatedItemHeight="60"
style="width: 500px; height: 600px;"
>
<template #items="{ visibleData }">
<div
class="item"
v-for="(item, index) in visibleData"
:key="item.id"
:style="{
height: itemHeight[index] + 'px',
lineHeight: itemHeight[index] + 'px',
}"
>
{{ item.value }}
</div>
</template>
</w-list>
data() {
return {
originalList: [],
itemHeight: [],
};
},
created() {
for (let i = 0; i < 9999; i++) {
this.originalList.push({ id: i, value: i });
this.itemHeight.push(Math.floor(Math.random() * 100) + 10);
}
}
参数
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
originalList | 包含大量数据的列表 | array | [] |
itemHeight | 行高度,静态高度可以直接写入像素值;动态高度可填入数组(仅适合开启 estimatedItemHeight) | number, array | 80 |
estimatedItemHeight | 行预估高度,组件通过是否传入该值判断是否需要使用动态高度 | number | 0 |
overscan | 展示列表上下视区上、下额外展示的 dom 节点数量预留项 | number | 5 |
animation | 是否开启动画(仅在使用钩子时有效) | Boolean | false |
Lost Slot
name | 返回参数 | 说明 | 类型 |
---|---|---|---|
items | visibleData | 当前需要展示的列表内容 | array 如[{id: 1, value: 1}] |
Hooks
方法名 | 说明 | 类型 |
---|---|---|
scroll | 列表滚动到底触发 | - |
added | 新增列表项触发,可配合 animation 使用 | - |
removed | 列表项删除触发,可配合 animation 使用 | - |
changed | 列表项变化触发(上述两个操作也会触发),可配合 animation 使用 | - |