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

简介: 这段内容是关于一个使用 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()
        })
      },
相关文章
|
移动开发 JavaScript 小程序
uView Empty 内容为空
uView Empty 内容为空
458 0
uni-app项目配置手机端底部的tab栏(一)
uni-app项目配置手机端底部的tab栏(一)
1360 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
4228 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
1529 0
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
4986 1
|
移动开发 小程序 API
uniapp组件库中Collapse 折叠面板 的使用方法
uniapp组件库中Collapse 折叠面板 的使用方法
2397 1
|
移动开发 小程序 API
uniapp中uview组件库的丰富Upload 上传上午用法
uniapp中uview组件库的丰富Upload 上传上午用法
1169 0
|
JavaScript
Uniapp实现时间选择器
Uniapp实现时间选择器
1961 0
uni-app动态修改顶部原生导航栏文字跟颜色
uni-app动态修改顶部原生导航栏文字跟颜色
1523 0
|
JavaScript
成功解决:Failed to resolve directive: mode
这篇文章介绍了如何解决Vue中遇到的"Failed to resolve directive: mode"错误的两个常见原因及其解决办法:确保指令的单词拼写正确,以及在创建Vue实例之前注册全局指令。
成功解决:Failed to resolve directive: mode