更新记录

0.0.1(2024-03-22) 下载此版本

1.0.0(2024-3-22)

  • 初始化项目

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × ×

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


安装方法

本组件符合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

属性名 类型 默认值 说明
allList Array [] 用于展示列表的全部数据
containerHeight Number 300 展示列表的高度,单位为px
type String single single为单列表,multiple为瀑布流列表

回调

事件名 类型 回调参数 说明
@scrolltolower function 触底事件

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问