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 的值来实现

方法

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

uni-ui版本

源码

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

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

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