更新记录

0.0.1（2024-03-22）

1.0.0（2024-3-22）

• 初始化项目

平台兼容性

虚拟列表-支持瀑布流与单列表动态高度展示

安装方法

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

<template>
    <view>
        <view class="warp">
            <zhibai-virtualList :allList="testList" :containerHeight="1000" type="multiple" @scrolltolower="scrolltolower">
                <template #default="scope">
                    <view style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; background-color: #666; color: #fff; " :key="scope.item.id">
                        <view class="img" style="display: flex; width: 100%;">
                            <image :src="`https://source.unsplash.com/random/800x600?id=${scope.item.id}`" mode="aspectFill" :style="`height: ${500 + (scope.item.index * 10)}upx; width: 100%;`" lazy-load></image>
                        </view>
                        <text>{{scope.item.id}}</text>
                        <text>{{scope.item.name}}</text>
                    </view>
                </template>
            </zhibai-virtualList>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import zhibai-virtualList from  '@/components/zhibai-virtualList.vue';

    const testList = ref([]);

    onLoad(()=>{
        console.log(111);
        for (var i = 0; i < 20; i++) {
            testList.value.push({name: '1233', img: 'test', id: i, index: i})
        }
    })

    const scrolltolower = () => {
        let listArr = [];

        for (var i = 0; i < 20; i++) {
            listArr.push({name: '1233', img: 'test', id: `${new Date().getTime()}${i}`, index: i})
        }

        testList.value = testList.value.concat(listArr);
    }

</script>

<style lang="scss">

</style>

API

Props

回调