小程序中vue for循环出来的数据变成折叠面板

在我们制作移动端折叠面板的时候，可以按照ref的方式获取高度来调节，但是我们在写小程序的时候，要按照小程序的api来获取修改高度，以下为完整的折叠面板代码，可以实现自动识别高度，是否折叠

v-for里面写

class="changeBox" :style="{'height':flag[index] ? heightArr[index] < staticHeight ? heightArr[index] + 'px' : staticHeight + 'px': heightArr[index] +'px'}"

两个折叠按钮

<view
    class="bottom-arw"
    @click="showContent(index)"
    v-if="flag[index] && heightArr[index] > staticHeight"
>展开﹀</view>
<view
    class="bottom-arw"
    @click="showContent(index)"
    v-if="!flag[index] && heightArr[index] > staticHeight"
>收起︿</view>

data数据

data() {
    return {
        flag: [],
        staticHeight: 140,
        heightArr: [],
    }
},

js部分

onLoad(query) {
    this.getData()
},
//方法
methods: {
    getData() {
        // 自己请求数据来循环列表
        this.setHeight()
    },
    showContent(index) {
        var f = (this.flag[index] = !this.flag[index])
        this.$set(this.flag, index, f)
    },
    setHeight() {
        this.$nextTick(() => {
            // 页面渲染完成后的回调
            const query = uni.createSelectorQuery().in(this)
            let nodesRef = query.selectAll(".changeBox")
            nodesRef
                .boundingClientRect(rek => {
                    if (!rek || !rek.length) {
                        this.isEmpty = true
                        return
                    }
                    rek.map((item, index) => {
                        this.heightArr.push(item.height)
                        this.$set(this.flag, index, true)
                    })
                })
                .exec()
        })
    }
}

大家可以按照自己的喜好自行修改