uniapp-virtual-list v1.0.0

virtual-list

介绍

减少大数据量列表造成卡顿，只渲染当前可视区域。

平台差异说明

如何安装

您可以使用 Yarn 或 npm 安装该软件包（选择一个）

yarn

yarn add uniapp-virtual-list

npm

npm install uniapp-virtual-list --save

基本使用

例如页面: pages/list.vue

<template>
    <view :class="pageClass">
        <v-virtual-list
            ref="virtualList"
            v-model="visibleList"
            height="500px"
            item-height="70"
            :list="list"
        >
            <view
                v-for="item in visibleList"
                :key="item.id"
                :id="'item-virtual-' + item._virtualId"
                :class="itemClass"
                :style="item._virtualStyle"
                @click="onClickItem(list, String(item._virtualId))"
            >
                <view class="content">{{ item.title }}</view>
            </view>
        </v-virtual-list>
    </view>
</template>

<script>
import VirtualList from 'uniapp-virtual-list';

export default {
    components: {
        VirtualList
    },

    data() {
        return {
            pageClass: 'page-list',
            itemClass: 'item-virtual',
            visibleList: [],
            list: [
                {
                    title: 'test-1'
                },
                {
                    title: 'test-2'
                },
                {
                    title: 'test-2'
                }
                // ...
            ]
        };
    },

    mounted() {
        this.$_initVirtualList();
    },

    methods: {
        $_initVirtualList() {
            this.$refs.virtualList.initialization({
                pageContext: this,
                containerSelector: '.' + this.pageClass,
                itemSelector: '.' + this.itemClass
            });
        },

        onClickItem(list, index) {
            // ...
        },

        /**
         * 监听 滚动到顶部，重置并加载新数据
         */
        onScrolltoupper() {
            if (this.loadingStatus.upper) return;

            this.loadingStatus.upper = true;

            setTimeout(() => {
                this.list = [];
                this.resetCount++;
                this.$_mockListData();
                this.$refs.virtualList.resetCache();
                this.loadingStatus.upper = false;

                console.log('--- onScrolltoupper end ---');
            }, 2000);
        },

        /**
         * 监听 滚动到底部，加载数据
         */
        onScrolltolower() {
            if (this.loadingStatus.lower) return;

            console.log('--- onScrolltolower start ---');
            this.loadingStatus.lower = true;

            setTimeout(() => {
                this.$_mockListData();
                this.loadingStatus.lower = false;

                console.log('--- onScrolltolower end ---');
            }, 2000);
        }
    }
};
</script>

完整实例

<template>
    <view :class="pageClass">
        <v-virtual-list ref="virtualList" v-model="visibleList" item-height="70" :list="list">
            <!-- header slot 一个上拉刷新数据demo-->
            <template #header>
                <u-loadmore
                    v-if="loadingStatus.upper"
                    status="loading"
                    icon-type="iconType"
                    :load-text="{ loading: '上拉刷新中...' }"
                    @scrolltoupper="onScrolltoupper"
                    @scrolltolower="onScrolltolower"
                />
            </template>

            <!-- default slot -->
            <template>
                <view
                    v-for="item in visibleList"
                    :key="item.id"
                    :id="'item-virtual-' + item._virtualId"
                    :class="itemClass"
                    :style="item._virtualStyle"
                    @click="onClickItem(list, String(item._virtualId))"
                >
                    <view class="content">{{ item.title }}</view>
                </view>
            </template>

            <!-- footer slot 一个下拉加载数据demo-->
            <template #footer>
                <u-loadmore
                    v-if="loadingStatus.lower"
                    status="loading"
                    icon-type="iconType"
                    :load-text="{ loading: '下拉加载中...' }"
                />
            </template>
        </v-virtual-list>
    </view>
</template>

<script>
import VirtualList from 'uniapp-virtual-list';

export default {
    components: {
        VirtualList
    },

    data() {
        return {
            pageClass: 'page-list',
            itemClass: 'item-virtual',
            visibleList: [],
            list: [
                {
                    title: 'test-1'
                },
                {
                    title: 'test-2'
                },
                {
                    title: 'test-2'
                }
                // ...
            ]
        };
    },

    mounted() {
        this.$_initVirtualList();
    },

    methods: {
        $_initVirtualList() {
            this.$refs.virtualList.initialization({
                pageContext: this,
                containerSelector: '.' + this.pageClass,
                itemSelector: '.' + this.itemClass
            });
        },

        onClickItem(list, index) {
            // ...
        }
    }
};
</script>

注意事项

Api

Props

Event

Ref

Slots

预览