uni-app 多层折叠面板

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 多层折叠面板

2 回复

在处理多层折叠面板(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事件。

通过这种方式,你可以轻松地实现多层折叠面板的功能。当然,根据你的具体需求,你可能需要调整样式或添加更多的功能。

回到顶部