更新记录

1.0.0（2026-04-21） 下载此版本

• 初始版本发布
• 支持上下滑动展开/收起
• 支持自定义样式
• 支持方法调用

平台兼容性

uni-app(3.7.6)

是的，完整示例是 README.md 内容的一部分。我之前输出的代码块被意外截断了，现在重新输出完整的 README.md，你可以直接复制全部内容使用：

# sea-swipe-expand

上下滑动展开/收起的组件，支持微信小程序、APP、H5。

## 特性

- 🖐️ 手势滑动，自然流畅
- 🎨 完全自定义样式
- ✨ 支持展开/收起动画
- 🔧 支持方法调用（open/close/toggle）
- 📱 多端兼容

## 快速开始

```vue
<template>
  <SeaSwipeExpand
    ref="swipeExpand"
    :defaultExpanded="false"
    :bgColor="'#ffffff'"
    :borderRadius="'32rpx'"
    :padding="'30rpx'"
    @change="onChange"
  >
    <template #dragHandle>
      <view class="drag-area">
        <view class="drag-bar"></view>
        <view class="drag-text">
          {{ expanded ? '↓ 收起 ↓' : '↑ 展开 ↑' }}
        </view>
      </view>
    </template>

    <view class="content">
      <view class="item">默认显示内容</view>
      <view class="item" v-if="expanded">展开后显示内容</view>
    </view>
  </SeaSwipeExpand>
</template>

<script>
import SeaSwipeExpand from '@/components/sea-swipe-expand/sea-swipe-expand.vue'

export default {
  components: { SeaSwipeExpand },
  data() {
    return {
      expanded: false
    }
  },
  methods: {
    onChange(val) {
      this.expanded = val
    }
  }
}
</script>

<style>
.drag-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}
.drag-bar {
  width: 80rpx;
  height: 8rpx;
  background: #ddd;
  border-radius: 4rpx;
  margin-bottom: 12rpx;
}
.drag-text {
  font-size: 24rpx;
  color: #999;
}
.item {
  padding: 28rpx;
  border-bottom: 1px solid #f0f0f0;
}
</style>

Props

// 一键复制 Props 配置
{
  "defaultExpanded": false,
  "disabled": false,
  "threshold": 30,
  "maxDistance": 80,
  "damping": 0.6,
  "duration": 300,
  "bgColor": "transparent",
  "borderRadius": "0rpx",
  "padding": "0",
  "customStyle": {}
}

事件

// 一键复制事件监听示例
{
  change: (val) => { console.log(val) },
  expand: () => { console.log('展开') },
  collapse: () => { console.log('收起') },
  dragStart: (e) => { console.log(e) },
  dragMove: (data) => { console.log(data.distance) },
  dragEnd: (data) => { console.log(data.expanded) }
}

方法

// 一键复制方法调用
this.$refs.seaSwipeExpand.open()
this.$refs.seaSwipeExpand.close()
this.$refs.seaSwipeExpand.toggle()
this.$refs.seaSwipeExpand.getExpanded()

插槽

<!-- 一键复制插槽使用 -->
<SeaSwipeExpand>
  <template #dragHandle>
    <view class="custom-drag">自定义拖拽区域</view>
  </template>
  <view class="custom-content">自定义内容</view>
</SeaSwipeExpand>

完整示例

<!-- 一键复制完整示例 -->
<template>
  <view class="page">
    <SeaSwipeExpand
      ref="myCard"
      :defaultExpanded="false"
      :bgColor="'#ffffff'"
      :borderRadius="'32rpx'"
      :padding="'30rpx'"
      :threshold="30"
      :maxDistance="80"
      :duration="300"
      @change="onChange"
      @expand="onExpand"
      @collapse="onCollapse"
    >
      <template #dragHandle>
        <view class="drag-area">
          <view class="drag-bar"></view>
          <view class="drag-text">
            {{ expanded ? '↓ 收起 ↓' : '↑ 展开 ↑' }}
          </view>
        </view>
      </template>

      <view class="content">
        <view class="item">默认内容 1</view>
        <view class="item">默认内容 2</view>
        <view class="item">默认内容 3</view>
        <view class="item hidden" v-if="expanded">更多内容 4</view>
        <view class="item hidden" v-if="expanded">更多内容 5</view>
      </view>
    </SeaSwipeExpand>

    <view class="buttons">
      <button @click="toggleCard">切换</button>
      <button @click="openCard">展开</button>
      <button @click="closeCard">收起</button>
    </view>
  </view>
</template>

<script>
import SeaSwipeExpand from '@/components/sea-swipe-expand/sea-swipe-expand.vue'

export default {
  components: { SeaSwipeExpand },
  data() {
    return {
      expanded: false
    }
  },
  methods: {
    onChange(val) {
      this.expanded = val
    },
    onExpand() {
      console.log('展开')
    },
    onCollapse() {
      console.log('收起')
    },
    toggleCard() {
      this.$refs.myCard.toggle()
    },
    openCard() {
      this.$refs.myCard.open()
    },
    closeCard() {
      this.$refs.myCard.close()
    }
  }
}
</script>

<style>
.page {
  padding: 30rpx;
  background: #f5f5f5;
}
.drag-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0 20rpx;
}
.drag-bar {
  width: 80rpx;
  height: 8rpx;
  background: #ddd;
  border-radius: 4rpx;
  margin-bottom: 12rpx;
}
.drag-text {
  font-size: 24rpx;
  color: #999;
}
.content {
  background: transparent;
}
.item {
  padding: 28rpx 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 28rpx;
  color: #333;
}
.hidden {
  color: #667eea;
}
.buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}
button {
  flex: 1;
  font-size: 28rpx;
}
</style>

渐变背景示例

<!-- 一键复制渐变背景示例 -->
<SeaSwipeExpand
  :defaultExpanded="false"
  :borderRadius="'32rpx'"
  :padding="'30rpx'"
  :customStyle="{
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  }"
  @change="onChange"
>
  <template #dragHandle>
    <view class="drag-area-white">
      <view class="drag-bar-white"></view>
      <view class="drag-text-white">
        {{ expanded ? '↓ 收起 ↓' : '↑ 展开 ↑' }}
      </view>
    </view>
  </template>
  <view class="content-white">
    <view class="item-white">渐变背景内容</view>
    <view class="item-white" v-if="expanded">更多内容</view>
  </view>
</SeaSwipeExpand>

禁用滑动示例

<!-- 一键复制禁用滑动示例 -->
<SeaSwipeExpand
  :disabled="true"
  :defaultExpanded="true"
  :bgColor="'#ffffff'"
  :borderRadius="'32rpx'"
  :padding="'30rpx'"
>
  <template #dragHandle>
    <view class="drag-area">
      <view class="drag-bar"></view>
      <view class="drag-text">已禁用滑动</view>
    </view>
  </template>
  <view class="content">
    <view class="item">内容固定显示</view>
  </view>
</SeaSwipeExpand>