uniapp小程序中uni-collapse嵌套uni-collapse不生效怎么办？

霞舞 2025-02-23 00:00:00 次阅读

uniapp小程序中uni-collapse嵌套uni-collapse失效的解决方法

在uniapp小程序开发

中，遇到uni-collapse嵌套uni-collapse在小程序端失效的情况，可能是因为子级uni-collapse没有正确地响应父级uni-collapse的展开或收起事件，导致其内容无法正常显示。

问题可能出在嵌套的uni-collapse组件没有正确地调用resize()方法更新其高度。仅仅触发父级uni-collapse的resize()方法可能不足以解决问题，因为子级uni-collapse的高度可能并未更新。

以下代码片段展示了可能存在的问题：

watch: {
  catalogueListTwo: { //监听 二级 目录
      handler(newValue, oldValue) {
          this.$refs.collapse.resize(); // 只触发了父级resize
      },
      deep: true
  },
  catalogueListTaskTwo: { //监听 二级 任务
      handler(newValue, oldValue) {
          this.$refs.collapse.resize(); // 只触发了父级resize
      },
      deep: true
  }
}

解决方案：

需要确保内外层的uni-collapse都调用了resize()方法。由于内部uni-collapse的内容是动态渲染的，因此需要在数据更新后，显式地调用内部uni-collapse的resize()方法。可以尝试以下几种方法：

在watch中同时触发内外层resize()： 修改watch方法，在数据变化后，同时调用内外层uni-collapse的resize()方法。

watch: {
  catalogueListTwo: {
      handler(newValue, oldValue) {
          this.$refs.collapse.resize();
          this.$refs.collapsetwo.resize(); // 同时触发子级resize
      },
      deep: true
  },
  catalogueListTaskTwo: {
      handler(newValue, oldValue) {
          this.$refs.collapse.resize();
          this.$refs.collapsetwo.resize(); // 同时触发子级resize
      },
      deep: true
  }
}

使用nextTick： 由于resize()方法需要在DOM更新后才能生效，可以使用nextTick确保DOM更新完成之后再调用resize()方法。

watch: {
  catalogueListTwo: {
      handler(newValue, oldValue) {
          this.$nextTick(() => {
              this.$refs.collapse.resize();
              this.$refs.collapsetwo.resize();
          });
      },
      deep: true
  },
  // ...
}

在uni-collapse的after-enter生命周期钩子中调用resize()： 如果使用了动画，可以在after-enter钩子函数中调用resize()方法，确保动画完成后再更新高度。
使用setTimeout： 如果以上方法仍然无效，可以尝试使用setTimeout延迟调用resize()方法，给DOM更新留出足够的时间。