2 回复
已经实现了,组件地址: https://ext.dcloud.net.cn/plugin?id=14221
在处理多层折叠面板(Accordion)的需求时,使用uni-app可以很方便地实现。以下是一个基于uni-app的多层折叠面板的代码示例。这里假设你已经熟悉uni-app的基本开发流程,并且有一个现成的项目结构。
1. 创建页面和组件
首先,在pages
目录下创建一个新的页面,比如accordion.vue
。
2. 编写页面代码
在accordion.vue
中,我们定义一个多层折叠面板的组件。这里使用Vue的递归组件来实现多层嵌套的折叠面板。
<template>
<view class="container">
<accordion-item v-for="(item, index) in items" :key="index" :item="item" @toggle="handleToggle"></accordion-item>
</view>
</template>
<script>
export default {
data() {
return {
items: [
{ title: 'Item 1', content: 'Content 1', children: [...] },
{ title: 'Item 2', content: 'Content 2', children: [...] },
// 更多项目...
]
};
},
methods: {
handleToggle(index) {
// 处理折叠面板的展开/收起逻辑
console.log('Toggle item:', index);
}
},
components: {
accordionItem: {
props: ['item'],
template: `
<view class="accordion-item">
<view class="title" @click="toggle">{{ item.title }}</view>
<view v-if="isOpen" class="content">
<view v-if="item.children && item.children.length">
<accordion-item v-for="(child, index) in item.children" :key="index" :item="child" @toggle="$emit('toggle', $event)"></accordion-item>
</view>
<view v-else>{{ item.content }}</view>
</view>
</view>
`,
data() {
return {
isOpen: false
};
},
methods: {
toggle() {
this.isOpen = !this.isOpen;
this.$emit('toggle', this.$parent.$index);
}
}
}
}
};
</script>
<style>
.container {
padding: 20px;
}
.accordion-item .title {
font-weight: bold;
cursor: pointer;
}
.accordion-item .content {
padding-left: 20px;
}
</style>
3. 说明
accordion.vue
是页面组件,它包含了accordionItem
组件的列表。accordionItem
组件是递归组件,它可以包含子面板。如果item
对象中有children
属性,则会递归渲染子面板。isOpen
数据属性控制当前面板的展开/收起状态。toggle
方法用于切换isOpen
的状态,并向上层组件发射toggle
事件。
通过这种方式,你可以轻松地实现多层折叠面板的功能。当然,根据你的具体需求,你可能需要调整样式或添加更多的功能。