操作步骤:直接打开官方工具Hbuilder X 新建基础项目模块,VUE版本选择3,然后引入插件 vue-virtual-scroller.
直接在浏览器编译,是完美运行的,但是 一旦编译运行到 微信开发者工具中,就会报错,我定位到底层js文件打印了一下,怀疑是插件底层vue版本问题导致,但是不知道怎么解决问题。下面附上报错截图和demo.

// index.vue
<script setup lang="ts" name="NeighborhoodShopping">
import { ref } from "vue";
// 声明虚拟列表数据源
const items = ref([
]);
const initData = () =>{
for (let i = 0; i < 10000; i++) {
items.value.push({
id:i,
label:i
})
}
}
initData()
</script>
<template>
<view class="neighborhood-shopping-wrapper">
<!-- 虚拟列表 -->
<view class="virtual-scroller">
<DynamicScroller
:items="items"
:min-item-size="54"
class="scroller"
>
<template v-slot="{ item, index, active }">
<DynamicScrollerItem
:item="item"
:active="active"
:size-dependencies="[
item.message,
]"
:data-index="index"
>
{{item.label}}
</DynamicScrollerItem>
</template>
</DynamicScroller>
</view>
</view>
</template>
// main.js
mport App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { nextTick, pushScopeId, popScopeId, openBlock, createBlock, withScopeId } from 'vue';
import { markRaw, shallowReactive, resolveComponent, resolveDirective, withDirectives, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveDynamicComponent, normalizeStyle, withCtx, Fragment, renderList, mergeProps, toHandlers, createVNode, normalizeProps, guardReactiveProps, h, reactive } from 'vue';
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import VueVirtualScroller from "vue-virtual-scroller";
export function createApp() {
const app = createSSRApp(App).use(VueVirtualScroller);
return {
app
}
}
// #endif