更新记录

1.0.0（2023-03-05） 下载此版本

上拉刷新，下拉加载更多的长列表(不限高度)的虚拟dom优化

平台兼容性

使用

基于插件https://ext.dcloud.net.cn/plugin?id=11110做的基础页面模板
<template>
    <base-page>
        <template #content>
            <view style="height: 100%;">
                <virtualList ref="virtualListRef" @loadMore="onLoadMore" @pull="onPull" :keeps="5" dataKey="id" :showList="showList" @dataSources="getVirtualListList">
                    <item v-for="(item,index) of dataSourcesArr" :key="index" :virtualIndex="item.id" :virtualItem="item">
                        <view>
                            {{item.xx}}
                        </view>
                    </item>
                </virtualList>
            </view>
        </template>
    </base-page>
</template>

<script>
    import virtualList from '@/components/virtualList'
    import item from '@/components/virtualList/item.vue'
    export default {
        components: {
            virtualList,
            item
        },
        data() {
            return {
                page: 1,
                dataSourcesArr: [],
                showList: []
            }
        },
        onLoad() {
            this.getStationList()
        },
        onShow() {},
        methods: {
            validatenull(val) {
                if (typeof val == 'boolean') {
                    return false;
                }
                if (typeof val == 'number') {
                    return false;
                }
                if (val instanceof Array) {
                    if (val.length == 0) return true;
                } else if (val instanceof Object) {
                    if (JSON.stringify(val) === '{}') return true;
                } else {
                    if (val == 'null' || val == null || val == 'undefined' || val == undefined || val == '') return true;
                    return false;
                }
                return false;
            },
            getStationList() {
                let _this = this
                getChargingStationList(this.page).then(res => { //网络情况按照真实逻辑处理
                    const { code, data } = res
                    if (code == 200) {
                        _this.$refs.virtualListRef.endSuccessRef(this.validatenull(data) ? 0 : data.length, { num: _this.page, size: 10 })
                        if (_this.page == 1) {
                            _this.showList = []
                        }
                        _this.showList = _this.showList.concat(data)
                    } else {
                        _this.$refs.virtualListRef.errRef()
                        _this.page--
                    }
                }).catch(err => {
                    _this.$refs.virtualListRef.errRef()
                    _this.page--
                })
            },
            getVirtualListList(data) {
                this.dataSourcesArr = data
            },
            onLoadMore() {
                this.page++
                this.getStationList()
            },
            onPull() {
                this.page = 1
                this.getStationList()
            },
        }
    }
</script>

注意:virtualIndex是唯一字段(建议是主键id),dataKey为主键的键(如id)
virtualList的父节点的高度一定要确定，否则插件会无法正常使用

属性介绍

• keeps 是显示可复用的 dom 的个数(number)
• estimateSize 预测一个 item 的高度(number)
• height 是 scrollView 的高度，空就是父元素的高度
• 最后建议使用https://ext.dcloud.net.cn/plugin?id=11110为基础页面模板

插件的文件结构

├── components
    └── empty
         ├── empty.vue
    └── virtualList
         ├── index.vue
         ├── item.vue
         ├── tools.js