更新记录

1.2.0（2023-12-23） 下载此版本

修复滚动到底有空白

1.1.0（2023-12-02） 下载此版本

修复数据更新后列表区域空白情况

1.0.0（2023-11-22） 下载此版本

init

平台兼容性

示例

<template>
    <view>
        <view class="renderBox">
            <cc-virtualList
                :listData="renderList"
                :estimatedItemSize="100"
                height="500px">
                <template v-slot="slotData">
                    <view
                        class="cc-list-item"
                        v-for="item in slotData.data"
                        :key="item.id"
                        :id="item.id">
                        {{ item.value }}
                    </view>
                </template>
            </cc-virtualList>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                renderList: []
            };
        },
        methods: {
            initData() {
                for (let i = 0; i < 100; i++) {
                    this.renderList.push({id: i, value: `数据${i}`});
                }
            }
        },
        onLoad() {
            this.initData();
        }
    };
</script>

<style lang="scss" scoped>
    .renderBox {
        border: 1px solid #f00;

        .cc-list-item:nth-child(2n) {
            height: 10vw;
            line-height: 10vw;
            background-color: #ccc;
        }
        .cc-list-item:nth-child(2n + 1) {
            height: 15vw;
            line-height: 15vw;
            background-color: #555;
        }
    }
</style>

props