小程序中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()
        })
    }
}

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