uni-app 报Bug exception function:callAddElement, exception:arguments is empty

开发环境	版本号	项目创建方式
Mac	10.15.7	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：10.15.7 (19H1217)

HBuilderX类型：正式

HBuilderX版本号：3.1.22

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：mi 11 lite

页面类型：nvue

打包方式：云端

示例代码：

修改uni-app项目中swiper-list-nvue/swiper-page.nvue 如下

<template>  
    <view class="uni-swiper-page">  
        <list ref="list" class="list" :offset-accuracy="5" :bounce="false" fixFreezing="true">  
            <cell v-for="(info, index) in dataList" :key="info.id" :ref="'item'+index">  
                <view class="hs-goods-div-item-h list-item">  
                    <image class="hs-goods-div-img__3" :src="info.img" mode="scaleToFill"></image>  
                    <view class="hs-goods-row-right__3">  
                        <view class="hs-good-div-titlediv">  
                            <text class="hs-goods-div-title__2"  
                                space="ensp">  &nbsp;商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</text>  
                            <image src="/static/pt-jd.png" class="hs-goods-div-title-logo" mode="heightFix"></image>  
                        </view>  
                        <view class="hs-goods-div-quan"></view>  
                        <view class="flex-1"></view>  
                        <view class="flex-h flex-align-e">  
                            <text class="hs-goods-div-yuan-name">券后</text>  
                            <text class="hs-goods-div-yuan__1" space="nbsp"> ¥ </text>  
                            <text class="hs-goods-div-price__1">{{info.price}}</text>  
                            <text class="hs-goods-div-old-price__2">¥ 330</text>  
                        </view>  
                        <view class="height30"></view>  
                        <view class="flex-h flex-align-c flex-justify-be">  
                            <text class="hs-goods-div-shop-name">官方旗舰店</text>  
                            <text class="hs-goods-div-vol__2">月销1.6万</text>  
                        </view>  
                    </view>  
                </view>  
            </cell>  
            <cell class="loading"></cell>  
        </list>  
    </view>  
</template>  
<script>  
    export default {  
        props: {  
            pid: {  
                type: [Number, String],  
                default: ''  
            },  
            parentId: {  
                type: String,  
                default: ''  
            }  
        },  
        data() {  
            return {  
                scrollable: true,  
                dataList: [],  
                goods: {  
                    img: 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/7aec54e736d12f2e78d02dfb44c2d56284356850.jpg',  
                    quanzhi: 10,  
                    price: 158,  
                    commission: 2,  
                    goodsInfo: {  
                        id: ''  
                    }  
                }  
            }  
        },  
        created() {  
            for (var i = 0; i < 30; i++) {  
                this.dataList.push({  
                    id: i,  
                    img: 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/7aec54e736d12f2e78d02dfb44c2d56284356850.jpg',  
                    quanzhi: 10,  
                    price: 158,  
                    commission: 2,  
                    goodsInfo: {  
                        id: ''  
                    }  
                });  
            }  
        },  
        methods: {  
            setScrollRef(height) {  
                if (this.$refs['list'].setSpecialEffects) {  
                    this.$refs['list'].setSpecialEffects({  
                        id: this.parentId,  
                        headerHeight: 1750  
                    });  
                }  
            },  
            loadData() {  
                // 首次激活时被调用  
            },  
            clear() {  
                // 释放数据时被调用，参考 swiper-list 缓存配置  
                this.dataList.length = 0;  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    // @import '@/common/hs.css';  
    @import '../../../common/hs.css';  
    $text-red:#F40B0E; //文字红色  
    $uni-border-radius-12: 12rpx;  
    $uni-color-white: #FFF;  
    $uni-color-14: #141414;  

    .height30 {  
        height: 30rpx;  
    }  

    .height26 {  
        height: 26rpx;  
    }  

    .height28 {  
        height: 28rpx;  
    }  

    .height6 {  
        height: 6rpx;  
    }  

    .min-red-yuan-text {  
        font-size: 20rpx;  
        line-height: 28rpx;  
        color: $text-red;  
        // height: 32rpx;  
        // padding-top: 12rpx;  
        margin-right: 4rpx;  
    }  

    .row-big-red-price {  
        font-size: 32rpx;  
        line-height: 32rpx;  
        font-weight: 700;  
        color: $text-red;  
    }  

    .row-big-red-price-sub {  
        font-size: 24rpx;  
        line-height: 26rpx;  
        font-weight: 700;  
        color: $text-red;  
    }  

    .hs-goods-div-title-logo {  
        position: absolute;  
        top: 4rpx;  
        left: 0;  
        height: 28rpx;  
    }  

    .hs-goods-div-rowcenter {  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: row;  
        align-items: center;  
        justify-content: center;  
    }  

    .hs-goods-div-item-h {  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: row;  
        align-items: stretch;  
    }  

    .hs-goods-div-yuan-name {  
        font-size: 24rpx;  
        font-weight: bold;  
        line-height: 26rpx;  
        color: $text-red;  
        // text-align: end;  
    }  

    .hs-goods-div-yuan__1 {  
        color: $uni-color-14;  
        font-size: 20rpx;  
        font-weight: bold;  
        line-height: 26rpx;  
        // text-align: end;  
        color: $text-red;  
    }  

    .hs-goods-div-price__1 {  
        font-size: 26rpx;  
        font-weight: bold;  
        line-height: 26rpx;  
        // text-align: end;  
        color: $text-red;  
    }  

    .hs-goods-div-title__2 {  
        /* #ifdef APP-NVUE */  
        lines: 2;  
        /* #endif */  
        /* #ifndef APP-NVUE */  
        overflow: hidden;  
        display: -webkit-box;  
        -webkit-box-orient: vertical;  
        -webkit-line-clamp: 2;  
        /* #endif */  
        text-overflow: ellipsis; //这是让文本溢出后，显示成省略号。  
        height: 72rpx; //这里不给高度会导致flex：1出现高度误差(因为text初始高度只有一行)  
        line-height: 36rpx;  
        font-size: 28rpx;  
        color: #171717;  
        font-weight: 500;  
    }  

    .hs-goods-div-quan {  
        height: 70rpx;  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: row;  
        align-items: center;  
        padding-bottom: 4rpx;  
    }  

    .hs-goods-div-old-price__2 {  
        font-size: 22rpx;  
        line-height: 22rpx;  
        color: #949494;  
        text-decoration: line-through;  
    }  

    .hs-goods-div-vol__2 {  
        font-size: 22rpx;  
        line-height: 22rpx;  
        color: #949494;  
        padding-right: 20rpx;  
    }  

    .heght16 {  
        height: 16rpx;  
    }  

    //-------------style 3 -----------------  
    .hs-goods-div-img__3 {  
        width: 228rpx;  
        height: 228rpx;  
        border-radius: 12rpx;  
        margin-right: 16rpx;  
    }  

    .hs-goods-row-right__3 {  
        height: 228rpx;  
        flex: 1;  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: column;  
        align-items: stretch;  
        padding-top: 4rpx;  
        padding-bottom: 4rpx;  
    }  

    .hs-goods-div-shop-name {  
        font-size: 22rpx;  
        line-height: 22rpx;  
        color: #989898;  
    }  

    .uni-swiper-page {  
        flex: 1;  
        position: absolute;  
        left: 0;  
        top: 0;  
        right: 0;  
        bottom: 0;  
    }  

    .list {  
        flex: 1;  
        /* background-color: #ebebeb; */  
    }  

    .list-item {  
        margin-left: 24rpx;  
        margin-right: 24rpx;  
        margin-top: 20rpx;  
        padding-top: 14rpx;  
        padding-right: 18rpx;  
        padding-bottom: 18rpx;  
        padding-left: 16rpx;  
        background-color: #fff;  
        border-radius: 20rpx;  
    }  

    .loading {  
        height: 20px;  
    }  
</style>

hs.css 代码如下：

.flex-v {  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: column;  
}  

.flex-h {  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
}  

.flex-orient-v {  
    flex-direction: column;  
}  

.flex-orient-h {  
    flex-direction: row;  
}  

.flex-1 {  
    flex: 1;  
}  

.flex-2 {  
    flex: 2;  
}  

.flex-3 {  
    flex: 3;  
}  

.flex-wrap {  
    flex-wrap: wrap;  
}  

.flex-nowrap {  
    flex-wrap: nowrap;  
}  

.flex-align-c {  
    align-items: center;  
}  

.flex-align-s {  
    align-items: flex-start;  
}  

.flex-align-e {  
    align-items: flex-end;  
}  

.flex-align-b {  
    align-items: flex-end;  
}  

.flex-align-str {  
    align-items: stretch;  
}  

.flex-justify-s {  
    justify-content: flex-start;  
}  

.flex-justify-e {  
    justify-content: flex-end;  
}  

.flex-justify-c {  
    justify-content: center;  
}  

.flex-justify-be {  
    justify-content: space-between;  
}  

.flex-justify-a {  
    justify-content: space-around;  
}

操作步骤：

修改uni-app项目代码如上后调试android进入 swiper-list模版后报错

预期结果：

界面有列表项展示

实际结果：

界面空白，切报错

bug描述：

Android调试报错（iOS正常）： reportJSException >>>> exception function:callAddElement, exception:arguments is empty, INSTANCE_RENDERING_ERROR will be set

uni-app.zip

更多关于uni-app 报Bug exception function:callAddElement, exception:arguments is empty的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

我发现把dataList数据的填充从created改到loadData方法里面就正常显示了…

更多关于uni-app 报Bug exception function:callAddElement, exception:arguments is empty的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼

牛批666

ionicwang 3楼

没人回复吗。。。。

sinazl 4楼

都修改了什么，提供的数据应该不完整。你可以将你修改的swiper-list整体修改都附件提交上来我们测试下

bupafengyu 5楼作者

我就只修改了swiper-list-nvue/swiper-page.nvue文件，我上传了一个附件麻烦看下；我的两个Android机都必现（华为mate 30 和一个小米 11 lite）

h691938207 6楼

如果把代码中class为 hs-goods-div-quan 的view屏蔽掉也可以正常显示；这个问题很莫名。。。。

h691938207 7楼

回复顺流而上: cell层级太深了导致排版异常了 nvue由原生渲染的view层级不能嵌套太深。建议去掉多余的嵌套view，text建议使用rich-text 减少层级应该就没问题了

zlyuanteng 8楼

回复 DCloud_Android_ST: 使用flex布局view是会多点，text也不能用啊？感觉nvue好坑

gougou168 9楼

回复顺流而上: 可以用，看你的布局几个多text其实可以使用一个rich-text就能完成的，减少消耗性能才能上来

zlyuanteng 10楼

回复 DCloud_Android_ST: 这个主要是text问题是吧？ view这个嵌套并不是很多哦，主要不知道怎么算深层次嵌套所以也担心nvue不知道什么时候出问题。。。。好难的感觉！ ios都正常。。。

songsunli 11楼

回复顺流而上: 我可没说view不影响应该尽可能的去精简。任何代码都要考虑性能。

eggper 12楼

回复 DCloud_Android_ST: 性能和crash 是不同的啊

yibo5220 13楼

回复顺流而上: 这个怎么说呢目前这个嵌套层级的问题属于android的限制，你说我多写几个标签就不能显示确实bug但是没有彻底解决方案，只能是去精简标签提高性能。跟内存不足是一个道理。我多用了点内存就闪退那肯定是bug。但是解决方案还是少用点内存。。。

caililin 14楼

回复 DCloud_Android_ST: 那如果不用nvue页面是否不存在android这个限制了？考虑用vue

sinazl 15楼

回复顺流而上: 是 vue是webview内核渲染不在android限制范畴

itying888 16楼

回复 DCloud_Android_ST: 我发现把dataList数据的填充从created改到loadData方法里面就正常显示了…

bupafengyu 17楼作者

这个错误通常是由于在 nvue 页面的 list 组件中，cell 的子元素结构存在问题导致的。从你的代码来看，问题可能出现在以下几个方面：

cell 的子元素必须是原生组件：在 nvue 的 list 组件中，cell 的直接子元素必须是原生组件（如 view、text、image 等），不能是自定义组件或包含复杂结构。
样式兼容性问题：nvue 的样式支持有限，部分 CSS 属性在 Android 上可能不支持。

具体到你的代码，我注意到：

每个 cell 中包含了一个 view.hs-goods-div-item-h，这个 view 又包含了 image 和另一个 view
样式文件中使用了 display: flex 的条件编译，但在 nvue 中不需要这样的条件编译

建议修改：

简化 cell 的直接子元素结构：

<cell v-for="(info, index) in dataList" :key="info.id">
    <view class="list-item">
        <!-- 原有内容 -->
    </view>
</cell>

移除不必要的条件编译：在 nvue 页面中，直接使用 flex 布局即可，不需要 #ifndef APP-NVUE 的条件编译。
检查 hs.css 中的样式：确保所有样式在 nvue 中都是支持的，特别是：

避免使用 display: flex 的条件编译
使用 nvue 支持的样式属性

尝试移除 ref 属性：

<cell v-for="(info, index) in dataList" :key="info.id">