低代码高性能原生UI框架Virtual-list
组件类型：UxVirtualListComponentPublicInstance
用于超长列表的展示
平台兼容性
UniApp X
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | √ |
UniApp Vue Nvue
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| x | x | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| list | Array | 列表数据 | |
| refresh | Function | 刷新事件 | |
| load | Function | 加载事件 |
示例代码
html
<template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :border="false">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-virtual-list :list="list" :refresh="refreshCallback" :load="loadCallback">
<template #header>
<ux-card direction="column" icon="flag-filled" title="虚拟列表" :bold="true">
<ux-text text="用于超长列表展示，不会导致内存溢出"></ux-text>
</ux-card>
</template>
<template v-slot:default="{items}">
<ux-virtual-item :height="45" :item="item" v-for="(item, index) in (items as Array<Item | null>)" :key="index">
<ux-card>
<ux-text :text="item!.name"></ux-text>
</ux-card>
</ux-virtual-item>
</template>
</ux-virtual-list>
</ux-page>
</template><template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :border="false">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-virtual-list :list="list" :refresh="refreshCallback" :load="loadCallback">
<template #header>
<ux-card direction="column" icon="flag-filled" title="虚拟列表" :bold="true">
<ux-text text="用于超长列表展示，不会导致内存溢出"></ux-text>
</ux-card>
</template>
<template v-slot:default="{items}">
<ux-virtual-item :height="45" :item="item" v-for="(item, index) in (items as Array<Item | null>)" :key="index">
<ux-card>
<ux-text :text="item!.name"></ux-text>
</ux-card>
</ux-virtual-item>
</template>
</ux-virtual-list>
</ux-page>
</template>ts
<script setup>
import * as plus from '@/uni_modules/ux-plus'
type Item = {
name: string
}
const list = ref<Item[]>([] as Item[])
async function getDatas() {
list.value = []
for (var i = 0; i < 2000; i++) {
list.value.push({
name: `${i + 1}`
} as Item)
}
}
async function refreshCallback(callback : () => void) {
await getDatas()
callback()
}
function loadCallback(callback : () => void) {
callback()
}
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/virtual-list.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
const title = ref('')
onLoad((e) => {
title.value = e['title'] ?? ''
getDatas()
})
</script><script setup>
import * as plus from '@/uni_modules/ux-plus'
type Item = {
name: string
}
const list = ref<Item[]>([] as Item[])
async function getDatas() {
list.value = []
for (var i = 0; i < 2000; i++) {
list.value.push({
name: `${i + 1}`
} as Item)
}
}
async function refreshCallback(callback : () => void) {
await getDatas()
callback()
}
function loadCallback(callback : () => void) {
callback()
}
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/virtual-list.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
const title = ref('')
onLoad((e) => {
title.value = e['title'] ?? ''
getDatas()
})
</script>css
<style lang="scss">
.item {
width: 100%;
height: 45px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: white;
border-bottom: 1px solid #f0f0f0;
.text {
font-size: 14px;
margin-left: 15px;
}
}
</style><style lang="scss">
.item {
width: 100%;
height: 45px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: white;
border-bottom: 1px solid #f0f0f0;
.text {
font-size: 14px;
margin-left: 15px;
}
}
</style>