首页 > 其他分享 >uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick

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

时间:2024-04-25 21:46:02浏览次数:23  
标签:nextTick return collapse uView value item uni

    <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(); 重新计算高度。但是无法正常撑开。

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

于是分析了下源码,发现注释掉下面一行代码就行。

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

 

 

 

 

标签:nextTick,return,collapse,uView,value,item,uni
From: https://www.cnblogs.com/shen55/p/18158687

相关文章

  • Nuxtjs如果使用useHead()导入swiper,除了在onMounted调用,切换报错前面使用 await next
     注意:awaitnextTick();如果没用,vue切换的时候可能有问题<scriptlang="ts"setup>import{DArrowRight}from"@element-plus/icons-vue";useHead({script:[{src:"/script/swiper.js",},],link:[{......
  • uview2 tabs左右滑动切换
    首先思路:在滑动区域监听事件,记录用户的起始位置,根据用户滑动的坐标判断出用户操作。<viewclass="body"@touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd">新增三个事件,用于监听用户操作touchStart(event){//记录触摸起始点的横坐......
  • uni app uview新增商品页(无限级分类选择和多图上传)
    uniappuview新增商品页(无限级分类选择和多图上传)给自己的牛腩商品库UNIAPP加的一个新增功能,就是通用的新增页面,用的uview2(https://uviewui.com/components/intro.html),能选择无限级分类和多图上传,自已觉得这个新增页面在以后做uniapp项目的时候很多地方会用到吧,先记下来了,以......
  • uview2.0版本,h5内网,无网络下icon图标不显示
    在项目目录下找到/node_modules/uview-ui/components/u-icon/u-icon.vue路径的文件由其中的代码片段可知,官方使用的是阿里云图标库的线上库,浏览器访问https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf这个地址,下载字体文件放到本地的static文件目录下然后将u-icon.vue......
  • Vue.nextTick() 使用场景及实现原理
    Vue.nextTick()基本使用作用:等待下一次DOM更新刷新的工具方法。为什么需要用到Vue.nextTick()?当你在Vue中更改响应式状态时,最终的DOM更新并不是同步生效的,而是由Vue将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少......
  • uView2
    1.安装和配置npminstalluview-ui@2.0.36main.jsimportuViewfrom"uview-ui";Vue.use(uView);2.icon<u-iconslot="right"color="#2979ff"size="28"name="arrow-right"></u-icon>3.image<u--i......
  • vue3,实现如何在element plus Collapse折叠面板中,只有在点击图标时才展开
        这个的类名是tailwindcss的,主要看这里,对应上面的图片<el-collapse-itemname="1"class="relative"><template#title><divclass="w-full"><div@click="handleChangeURL"......
  • uview-ui toast 二次封装
    开发用到uview的toast很常用的内容使用却很繁琐所以做了简单封装方便使用前后对比:this.$refs.uToast.show({ type:'success', title:'成功主题(带图标)', message:"庄生晓梦迷蝴蝶", iconUrl:'https://cdn.uviewui.com/uview/demo/toast/success.png'})//使用前......
  • uni-app、uview开发时的三种富文本渲染方案
    来源:https://www.shanhubei.com/archives/51231.html1.使用vue语法的v-html<!--使用v-html渲染富文本--><!--<viewv-html="`<h1>富文本</h1><h2>富文本</h2><h3>富文本</h3>`"></view>-->2.使用小程序标签rich-text&l......
  • OpenMP - 嵌套循环"collapse"
    collapse子句用于将多个嵌套的循环折叠成一个单独的循环。这个特性通常用于在嵌套循环上并行化以提高性能。参数n指定了折叠的层数。#include<iostream>#include<omp.h>usingnamespacestd;intmain(intargc,char*argv[]){inta[6][6];#pragmaompparallel......