uniapp collapse动态生成多个折叠面板手动展开收起(包括uni-ui版)

前言

官方文档没有暴露出相关api,那就看看组件源码。

以下示例均通过 vue-cli 创建的 uni-app h5 项目

uView(1.x)版本

源码

node_modules\uview-ui\components\u-collapse-item\u-collapse-item.vue

这个方法是用来改变折叠面板子组件收起还是展开的,根据改变 isShow 的值来实现

方法

html 复制代码
<block v-for="item in 10">
   <u-collapse :accordion="true" :arrow="false">
      <u-collapse-item :ref="`panel${item}`" :index="item" @change="changeCollapse" title="折叠面板"></u-collapse-item>
   </u-collapse>
</block>
javascript 复制代码
<script>
export default {
	name: '',
	data() {
		return {}
	},

	methods: {
		//监听折叠面板
		changeCollapse(obj) {
            let { index, show } = obj
			this.$nextTick(() => {
				for (let i = 1; i < 11; i++) {
					this.$refs[`panel${i}`][0].isShow = false
				}
			})

			this.$nextTick(() => {
				if (show) {
					this.$refs[`panel${index}`][0].isShow = true
				}
			})
		}
	}
}
</script>

uni-ui版本

源码

node_modules\@dcloudio\uni-ui\lib\uni-collapse-item\uni-collapse-item.vue

这个方法是用来改变折叠面板子组件收起还是展开的,根据改变 isOpen 的值来实现

html 复制代码
<block v-for="item in 10">
   <uni-collapse @change="changeCollapse($event, String(item))" accordion>
      <uni-collapse-item :ref="`panel${item}`" title="折叠面板"></uni-collapse-item>
   </uni-collapse>
</block>
javascript 复制代码
<script>
export default {
	name: '',
	data() {
		return {}
	},

	methods: {
		//监听折叠面板
		changeCollapse(e, index) {
			this.$nextTick(() => {
				for (let i = 1; i < 11; i++) {
					this.$refs[`panel${i}`][0].isOpen = false
				}
			})

			this.$nextTick(() => {
				if (e) {
					this.$refs[`panel${index}`][0].isOpen = true
				}
			})
		}
	}
}
</script>
相关推荐
醉の虾21 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧30 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm39 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng184043 分钟前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
游走于计算机中摆烂的1 小时前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
码蜂窝编程官方2 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游