uni-app 有没有现成的向上展开的折叠面板呀？

在 uni-app 中，虽然官方没有直接提供一个现成的向上展开的折叠面板组件，但你可以通过自定义组件的方式来实现这一功能。以下是一个简单的实现示例，展示了如何创建一个可以向上展开的折叠面板。

首先，你需要创建一个自定义组件，比如 CollapsePanel.vue：

<template>
  <view class="collapse-panel">
    <view class="panel-header" @click="toggle">
      <slot name="header">{{ header }}</slot>
      <view class="arrow" :class="{ 'arrow-up': isOpen, 'arrow-down': !isOpen }"></view>
    </view>
    <transition name="fade">
      <view class="panel-content" v-show="isOpen">
        <slot></slot>
      </view>
    </transition>
  </view>
</template>

<script>
export default {
  props: {
    header: {
      type: String,
      default: '标题'
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style scoped>
.collapse-panel {
  width: 100%;
  overflow: hidden;
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
}
.arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transition: transform 0.3s ease;
}
.arrow-down {
  border-top: 5px solid #333;
  transform: rotate(0deg);
}
.arrow-up {
  border-bottom: 5px solid #333;
  transform: rotate(180deg);
}
.panel-content {
  padding: 10px;
  background-color: #fff;
  overflow: hidden;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(-100%); /* Ensure content slides up */
}
</style>

然后，你可以在你的页面中使用这个组件，比如 index.vue：

<template>
  <view>
    <collapse-panel header="面板标题">
      <view>这是面板的内容。</view>
    </collapse-panel>
  </view>
</template>

<script>
import CollapsePanel from '@/components/CollapsePanel.vue';

export default {
  components: {
    CollapsePanel
  }
};
</script>

这个示例展示了如何创建一个简单的向上展开的折叠面板组件，并在页面中使用它。你可以根据需要进一步自定义样式和功能。