3***@qq.com
3***@qq.com
  • 发布:2024-11-18 12:52
  • 更新:2024-11-18 12:52
  • 阅读:19

uni-collapse-item递归多级嵌套,到第三级高度不自适应,使用resize()也报错

分类:uni-app

递归组件:

<template>  
    <div>  
        <uni-collapse ref="collapse" v-for="(item, index) in data">  
            <!-- 分为两种情况  
                 情况一:有子集 -->  
            <uni-collapse-item :key="index" :title="item.title"  
                               v-if="item.subList.length > 0">  
                <my-item class="sub-list" :data="item.subList" :count="count+1"></my-item>  
            </uni-collapse-item>  
            <!-- 情况二:没子集-->  
            <uni-collapse-item :key="index" v-else :title="item.title">  
            </uni-collapse-item>  
        </uni-collapse>  
    </div>  
</template>  

<script>  
    import UniCollapse from "../uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue";  
    import UniCollapseItem from "../uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue";  

    export default {  
        name: "myItem",  
        components: {  
            UniCollapseItem,  
            UniCollapse  
        },  
        props: {  
            data: {  
                type: Array,  
                default: [],  
            },  
            count: {  
                type: Number,  
                default: 1,  
            }  
        },  
        data() {  
            return {}  
        },  
        mounted() {  
        }  
    };  
</script>  

调用递归组件:

<template>  
    <view>  
        <!-- #ifndef H5 -->  
        <statusBar></statusBar>  
        <!-- #endif -->  

        <div id="header">  
            <uni-nav-bar id="navTop" title="今天不干也得干"  
                         background-color="var(--bg-color)" :border="false">  
            </uni-nav-bar>  
        </div>  

        <div class="body">  
            <my-item :data="listData"></my-item>  
        </div>  
    </view>  
</template>  
2024-11-18 12:52 负责人:无 分享
已邀请:

要回复问题请先登录注册