8***@qq.com
8***@qq.com
  • 发布:2023-07-26 18:08
  • 更新:2023-07-26 18:19
  • 阅读:699

uni-app Vue3 版本 在H5环境中完美运行,在微信开发者工具中报错,疑似插件底层vue版本问题导致

分类:uni-app

操作步骤:直接打开官方工具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
2023-07-26 18:08 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com (作者) - Combohu

注释掉引入这个vue-virtual-scroller插件,就可以编译成功,一导入这个插件就报图上的错.项目有点急,自己百度了很久都没有解决方案,希望官方大大指点一二,谢谢~

8***@qq.com

8***@qq.com (作者) - Combohu

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'; 

这两行导入不用写进去,是我定位问题自己加的。

8***@qq.com

8***@qq.com (作者) - Combohu

其他同行有遇到这种问题的嘛?如果有的话,请告知一下,小弟不胜感激!!

  • 1***@qq.com

    别想那么多,单纯就是小程序不支持,在这浪费时间还不如想想别的方法,还有就是web端是web端,小程序端是小程序的,小程序是屏蔽bom api的,所以是做不了dom操作的。因此不要直接把web端的组件搬过来用

    2023-07-26 21:47

  • 8***@qq.com (作者)

    回复 1***@qq.com: 这样啊,那既然小程序端屏蔽了BOM操作,那是不是对于长列表的处理就可以直接采用上拉加载往list里面push数据就行了,默认小程序自带虚拟列表功能呢?

    2023-07-27 09:16

该问题目前已经被锁定, 无法添加新回复