uniapp手风琴折叠

uniapp手风琴折叠实现方法

在uniapp中实现手风琴折叠效果，可以通过结合<uni-collapse>组件或自定义组件的方式完成。以下是两种常见实现方案：

使用uni-collapse组件

uniapp官方提供了uni-collapse折叠面板组件，内置手风琴模式：

<template>
  <uni-collapse accordion>
    <uni-collapse-item title="标题1">
      <text>内容1</text>
    </uni-collapse-item>
    <uni-collapse-item title="标题2">
      <text>内容2</text>
    </uni-collapse-item>
  </uni-collapse>
</template>

<script>
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
import uniCollapseItem from '@/components/uni-collapse/uni-collapse-item.vue'
export default {
  components: { uniCollapse, uniCollapseItem }
}
</script>

通过设置accordion属性开启手风琴模式，同一时间只会展开一个面板。

自定义实现方案

如需更灵活的定制，可通过数据驱动方式实现：

<template>
  <view class="accordion">
    <view 
      v-for="(item, index) in list" 
      :key="index"
      class="item"
      @click="toggle(index)"
    >
      <view class="header">{{ item.title }}</view>
      <view class="content" v-show="activeIndex === index">
        {{ item.content }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: null,
      list: [
        { title: '标题1', content: '内容1' },
        { title: '标题2', content: '内容2' }
      ]
    }
  },
  methods: {
    toggle(index) {
      this.activeIndex = this.activeIndex === index ? null : index
    }
  }
}
</script>

<style>
.accordion {
  border: 1px solid #eee;
}
.header {
  padding: 20rpx;
  background: #f5f5f5;
}
.content {
  padding: 20rpx;
  border-top: 1px solid #eee;
}
</style>

动画效果增强

为提升用户体验，可添加过渡动画：

.content {
  overflow: hidden;
  transition: all 0.3s ease;
}

注意事项

1. 使用官方组件需确保已正确安装uni-collapse组件
2. 自定义实现时注意控制v-show或v-if的切换逻辑
3. 手风琴模式的核心是保持同一时间只有一个面板展开
4. 复杂场景可考虑使用uniapp插件市场的第三方手风琴组件

两种方案均可实现手风琴效果，官方组件更标准化，自定义方案灵活性更高。根据项目复杂度选择合适方案即可。