当前位置：首页 > uni-app

uniapp手风琴折叠

2026-03-26 11:04:53uni-app

实现手风琴折叠效果的方法

在UniApp中实现手风琴折叠效果可以通过多种方式完成，以下介绍几种常见的方法：

使用uni-collapse组件

UniApp官方提供了uni-collapse组件，专门用于实现折叠面板效果。该组件支持手风琴模式，即同时只能展开一个面板。

uniapp手风琴折叠

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

自定义实现手风琴效果

如果不使用官方组件，可以通过数据绑定和事件处理自定义实现：

uniapp手风琴折叠

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

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

使用第三方UI库

如uView UI等第三方组件库也提供了手风琴组件：

<u-collapse :accordion="true">
  <u-collapse-item title="标题1">
    内容1
  </u-collapse-item>
  <u-collapse-item title="标题2">
    内容2
  </u-collapse-item>
</u-collapse>

样式优化建议

为提升手风琴效果的用户体验，可以添加以下样式：

.accordion {
  width: 100%;
}
.title {
  padding: 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
}
.content {
  padding: 15px;
  background-color: #fff;
  transition: all 0.3s;
}