uniapp collapse动态生成多个折叠面板手动展开收起（包括uni-ui版）-Toy模板网

这篇具有很好参考价值的文章主要介绍了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

uniapp collapse动态生成多个折叠面板手动展开收起（包括uni-ui版）,uniapp,前端,vue,uni-app,vue.js,前端

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

方法

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

<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

uniapp collapse动态生成多个折叠面板手动展开收起（包括uni-ui版）,uniapp,前端,vue,uni-app,vue.js,前端

这个方法是用来改变折叠面板子组件收起还是展开的，根据改变 isOpen 的值来实现文章来源地址https://www.toymoban.com/news/detail-739118.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>

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

到了这里，关于uniapp collapse动态生成多个折叠面板手动展开收起（包括uni-ui版）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！