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
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2844 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
修改elementui table 组件滚动条样式
修改elementui table 组件滚动条样式
128 0
|
8月前
|
移动开发 JavaScript 小程序
uView Collapse 折叠面板
uView Collapse 折叠面板
148 0
|
6月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
1280 0
|
8月前
|
移动开发 小程序 JavaScript
uView Slider 滑动选择器
uView Slider 滑动选择器
146 0
|
8月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
474 1
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
|
JavaScript 小程序 Android开发
讲述小程序之组件picker(从底部弹起的滚动选择器)
讲述小程序之组件picker(从底部弹起的滚动选择器)
378 0
讲述小程序之组件picker(从底部弹起的滚动选择器)