uView（u-collapse）折叠展开高度问题无法撑开 nextTick-阿里云开发者社区

uView（u-collapse）折叠展开高度问题无法撑开 nextTick

2024-06-03 23

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这段内容是关于一个使用 Vue 的代码示例，涉及`u-collapse`组件的使用问题。代码展示了如何通过`v-for`循环渲染`levelList`和`filmList`数据。当`u-collapse`以手风琴模式运行时，`filmList`的数据加载后未能正确展开。问题在于尽管尝试了官方文档的方法和网络上的其他解决方案，但`filmList`依然无法正常显示。

<u-collapse ref="myCollapse" @change="change" accordion>
      <u-collapse-item v-for="(level,index) in levelList" :key="index" :title="level.name" ref="collapseHeight">
        <view class="">
          <view v-for="(film,i) in filmList" :key="i" class="u-p-20">
            {{film.name}}
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>

async change(list) {
        const index = list.findIndex((item) => {
          return item.status === 'open'
        })
        if (index === -1) {
          return
        }
        this.filmList = await this.getFilmData(index + 1)
        this.$nextTick(() => {
          this.$refs.myCollapse.init();
        })
      },

collapse是手风琴模式。

数据levelList、filmList，都是异步加载。levelList渲染正常。

filmList数据在加载完成后，按照官方文档提供的方法：init(); 重新计算高度。但是无法正常撑开。

试了网上的多个方法，但是都没有效果。

于是分析了下源码，发现注释掉一行代码就行。文件路径：uni_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue

this.expanded = this.name == value

// 异步获取内容，或者动态修改了内容时，需要重新初始化
      init() {
        // 初始化数据
        this.updateParentData()
        if (!this.parent) {
          return uni.$u.error('u-collapse-item必须要搭配u-collapse组件使用')
        }
        const {
          value,
          accordion,
          children = []
        } = this.parent
        if (accordion) {
          if (uni.$u.test.array(value)) {
            return uni.$u.error('手风琴模式下，u-collapse组件的value参数不能为数组')
          }
          // this.expanded = this.name == value
        } else {
          if (!uni.$u.test.array(value) && value !== null) {
            return uni.$u.error('非手风琴模式下，u-collapse组件的value参数必须为数组')
          }
          this.expanded = (value || []).some(item => item == this.name)
        }
        // 设置组件的展开或收起状态
        this.$nextTick(function() {
          this.setContentAnimate()
        })
      },