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

这篇具有很好参考价值的文章主要介绍了uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

    <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>

 文章来源地址https://www.toymoban.com/news/detail-858130.html

      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()
				})
			},

 

 

 

 

 

到了这里,关于uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 自定义Collapse 折叠面板的下拉图标,以及切换数据渲染Collapse 时实现设置Collapse 默认全部关闭

    效果图: 1. 首先需要在折叠面板中绑定activeName,activeName用来装每个面板的唯一标识 2.在切换左侧规则时设置 activeNames 为空数组即可将全部的Collapse 设置为关闭状态 1.首先隐藏右侧的默认图标:审查元素可以看到右侧图标有自己的标签,直接隐藏掉(scoped下注意要用样式穿透

    2024年02月14日
    浏览(38)
  • uniapp组件库中Collapse 折叠面板 的使用方法

    目录 #平台差异说明 #基本使用 #控制面板的初始状态,以及是否可以操作 #自定义样式 #1. 如果修改展开后的内容? #2. 如何自定义标题的样式? #3. 如何修改整个Item的样式? #API #Collapse Props #Collapse Item Props #Collapse Event #Collapse Item Event #Collapse Methods #Slot 通过折叠面板收纳内容

    2024年01月21日
    浏览(34)
  • el-table表单一键展开折叠,展开部分后一键全部展开或折叠

    实现功能: 1.表单一键展开或者一键折叠 2.表单点击展开一部分后,再次点击展开或折叠按钮可以全部展开或全部折叠 3.完整代码在最后 1.ref=\\\"table\\\",用节点绑定的方式实现 2.data:树形结构数据 3.:tree-props=\\\"{ children: \\\'child\\\', hasChildren: \\\'hasChildren\\\' }\\\",中的children就是自动判断data中

    2024年02月11日
    浏览(32)
  • 简单实用折叠面板可以折叠收起展开内容区域

    前端简单实用折叠面板可以折叠收起展开内容区域, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:       代码如下:  # 简单实用折叠面板可以折叠收起展开内容区域。 #### 使用方法 ```使用方法 !-- leftText:做标题  rigText: 有注明文字 isOpen:展开折叠状态

    2024年02月08日
    浏览(67)
  • 前端vue简单实用折叠面板可以折叠收起展开内容区域

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月06日
    浏览(30)
  • vscode折叠展开快捷键

    1.折叠所有代码 (按住ctrl 分别点击k和0) ctrl+k,ctrl+0 2.展开所有代码 (按住ctrl 分别点击k和j)  ctrl+k,ctrl+j 3. 折叠鼠标竖线所在位置的节点以及当前节点下的子节点(递归折叠)  ctrl+k,ctrl+[ 4. 展开鼠标竖线所在位置的节点以及当前节点下的子节点(递归展开)   ctrl+k,ctrl+] 5.折

    2024年02月03日
    浏览(68)
  • 记录--多行标签超出展开折叠功能

     记录分享每一个日常开发项目中的实用小知识,不整那些虚头巴脑的框架理论与原理,之前分享过抽奖功能、签字功能等,有兴趣的可以看看本人以前的分享。  今天要分享的实用小知识是最近项目中遇到的标签相关的功能,我不知道叫啥,姑且称之为【多行标签展开隐藏

    2024年02月11日
    浏览(23)
  • vue实现折叠展开收缩动画

    vue项目列表折叠面板动画效果实现 element-ui之el-collapse-transition(折叠展开动画)源码解析学习 以下代码注意两点 trainsition是需要有两个值,才能产生过渡动画的,所以一开始就需要获取到box1的高度(通过scrollHeight去获取它的高度) box1收缩,其实就是把它的height改为0,超出

    2024年02月09日
    浏览(25)
  • vscode折叠代码展开快捷键

    1.折叠所有代码 (按住ctrl 分别点击k和0) ctrl+k,ctrl+0 2.展开所有代码 (按住ctrl 分别点击k和j) ctrl+k,ctrl+j 3. 折叠鼠标竖线所在位置的节点以及当前节点下的子节点(递归折叠) ctrl+k,ctrl+[ 4. 展开鼠标竖线所在位置的节点以及当前节点下的子节点(递归展开) ctrl+k,ctrl+] 5.折叠除所

    2024年02月11日
    浏览(41)
  • 微信小程序view的折叠与展开

    在做隐藏view之前,我们可以先来了解一下微信小程序视图层的事件。 官方文档 事件 | 微信开放文档 什么是事件? 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件

    2024年02月02日
    浏览(24)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包