操作步骤:直接打开官方工具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 
             
             
             
			 
                                        
                                    
