uniapp uView Collapse 折叠面板打开内容不显示或者显示慢不全的情况

1. 官网文档（uView 1.0版本）

2.调用源码的方法查询内容高度 

3.解决给u-collapse–item添加ref属性

<template>
    <view>
        <u-collapse>
            <u-collapse-item
                title="title"
                ref="collapseHeight"
                v-for="(item, index) in list"
                @change="handleOpenChange(item, index)"
            >
                {{item.content}}
            </u-collapse-item>
        </u-collapse>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{name: 'aaa',iid:1}, {name: 'bbb',iid:1}]
            };
        },
        methods: {
            handleOpenChange(item, index) {
                   //根据文档使用$nextTick，获取高度无效，试用setTimeout
                   setTimeout(() => {
                      this.$refs.collapseHeight[index].queryRect();
                   }, 20);
            }
        }
    }
</script>

代码007普通

打赏 收藏 海报 链接