uView（u-collapse）折叠版高度问题

wendy_qx

已于 2023-06-05 10:38:44 修改

阅读量3.4k

点赞数 3

分类专栏： uniapp 文章标签： html vue.js javascript

于 2023-04-08 11:49:06 首次发布

本文链接：https://blog.csdn.net/wendy_qx/article/details/130026773

版权

uniapp 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

当折叠版内容展示不全时，可以通过监听折叠版的展开事件并重新计算每个折叠版的高度来解决。在Vue组件中，可以给折叠版设置ref，使用change事件监听展开状态，然后在回调函数中通过$refs访问到每个折叠版并计算其高度。两种方法包括直接调用queryRect()计算和使用$nextTick初始化。

摘要由CSDN通过智能技术生成

问题：展开折叠版内容展示不全

解决办法：监听每一次折叠版展开，并重新计算高度

1.给折叠版ref,利用change事件监听折叠版展开

<template>
  <view>
    <view>
      <u-collapse @change="handleOpenChange">
        <u-collapse-item
          v-for="(item, index) in 5"
          :key="index"
          :title="'第个' + index + 1 + '折叠版'"
          ref="collapseHeight"
        >
          <view class="item">
            <p v-for="(item, index) in 50" :key="index">{{ index + 1 }}</p>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
  </view>
</template>

2.重新计算高度

如果有多个折叠版就必须用循环计算每一个折叠版高度

 methods: {
    // 从新计算折叠版高度
    handleOpenChange() {
        // 方法一
      console.log(this.$refs.collapseHeight);
      let long = this.$refs.collapseHeight.length;
      setTimeout(() => {
        for (let i = 0; i < long; i++) {
          this.$refs.collapseHeight[i].queryRect();// 计算高度
        }
      }, 20);

        // 方法二
        //this.$nextTick(() => {
        //this.$refs.collapseHeight.init()
        //})


    },
  },