uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick
  JRkx9cNhZvS3 21天前 28 0
Vue
    <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()
				})
			},

 

 

 

 

 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 21天前 0

暂无评论

推荐阅读
  JZjRRktyDDvK   15天前   30   0   0 Vue
JRkx9cNhZvS3