更新记录

2.0.1（2023-10-25） 下载此版本

修复无法点击元素的bug

2.0.0（2023-10-24） 下载此版本

实现兼容微信小程序，app，H5。实现滚动到指定位置，实现指定滚动方向

2.0（2023-10-24） 下载此版本

实现滚动到指定元素，实现滚动方向

平台兼容性

虚拟列表-解决大数据列表操作问题

组件名：jp-virtual-list

安装方式

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

有项目需要开发的请联系 QQ:371524845

开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新

基本用法

<template>
    <view class="h100">
        <view style="line-height: 40px;display: flex;justify-content: space-between;">
            <view @click="toAssign">滚动到：Item999</view>
            <view @click="toAssign1">滚动到：Item100</view>
            <view @click="toAssign2">滚动到：Item0</view>
        </view>
        <jp-virtual-list code="id" class="h100" :refresher="true" isBackTop @scrolltoupper="scrolltoupper" @refresher="refresher" :data="listx" ref="search">
            <template v-slot="{ list }">
                <view v-for="item in list" :key="item.id" :id="item.id" :ref="item.id">
                    <view class="list_item" :style="'height:' + item.height +'rpx'">
                        {{item.id}}随机高度：{{item.height}}
                    </view>
                </view>
            </template>
        </jp-virtual-list>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                listx: [],
                key: ''
            }
        },
        mounted() {
            const data = []
            for (let i = 0; i < 10000; i++) {
                data.push({
                    name: `Item ${i}`,
                    index: i,
                    id: `Item${i}`,
                    height: (Math.floor(Math.random() * 100)+100)
                })
            }
            this.listx = data
        },
        methods: {
            toAssign(){
                this.$refs.search.toAssign('Item999',this)
            },
            toAssign1(){
                this.$refs.search.toAssign('Item100',this)
            },
            toAssign2(){
                this.$refs.search.toAssign('Item0',this)
            },
            scrolltoupper(){
                const data = []
                for (let i = 0; i < 30; i++) {
                    data.push({
                        name: `Itemc ${i}`,
                        index: i,
                        id: `Itemc${i}${(Math.floor(Math.random() * 100)+100)}`,
                        height: (Math.floor(Math.random() * 100)+100)
                    })
                }
                setTimeout(()=>{
                    // 告诉组件我需要添加该数据
                    this.$refs.search.addPage(data)
                },1000)
            },
            refresher(){
                const data = []
                for (let i = 0; i < 10000; i++) {
                    data.push({
                        name: `Item ${i}`,
                        index: i,
                        id: `Item${i}`,
                        height: (Math.floor(Math.random() * 100)+100)
                    })
                }
                setTimeout(()=>{
                    this.listx = data
                    // 告诉组件刷新成功了
                    this.$refs.search.refreshers()
                },2000)
            },
        }
    }
</script>

<style lang="scss">
    .h100{
        height: calc(100vh - 80px);
    }
    .list_item {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #f5f5f5;
    }
</style>

API

Props

* 注意jp-virtual-list需要一个高度

回调

事件