更新记录

1.0.0（2026-10-13）下载此版本

首次发布
支持 plane / card3d / stack3d / animation 四种模式
支持 v-model:current、item 插槽、自定义指示器
兼容 H5、微信小程序、App（vue 渲染）、uni-app x

平台兼容性

uni-app(3.8.5)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	-	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
-	-	-	-	-	-	-	-	-	-	-	-

minetel-carousel 全平台轮播图

一个零依赖的 uni-app 轮播图组件，内置四种展示模式，覆盖 H5、微信小程序、App（vue 渲染）、uni-app x。

特性

plane 平面轮播：标准单图 / 多图同屏
card3d 卡片缩放轮播：当前项放大居中，前后项缩小淡出
stack3d 堆叠轮播：前后项向下堆叠，形成卡片叠层
animation 文字动画轮播：文字随图片切换改变位置、透明度
全平台兼容，伪 3D 实现，不依赖 transform-style: preserve-3d
支持 v-model:current 双向绑定、自定义指示器、item 插槽
无第三方依赖，体积约 8KB

安装

方式一：插件市场导入

在 DCloud 插件市场搜索 minetel-carousel，一键导入项目，插件会自动落到 uni_modules/minetel-carousel。

方式二：手动复制

将 uni_modules/minetel-carousel 整个目录复制到你的项目 uni_modules/ 下。

无需在 pages.json 中注册组件，easycom 会自动识别。

快速开始

<template>
  <minetel-carousel :list="list" mode="card3d" height="400rpx" />
</template>

<script>
export default {
  data() {
    return {
      list: [
        { image: '/static/banner1.jpg', title: '山间清晨', desc: '薄雾在林间缓慢流动' },
        { image: '/static/banner2.jpg', title: '海岸黄昏', desc: '潮水把光留在沙上' },
        { image: '/static/banner3.jpg', title: '城市夜行', desc: '霓虹在车窗上拉成线' }
      ]
    }
  }
}
</script>

四种模式

模式	值	说明	关键参数
平面轮播	`plane`	相邻项不露出，标准轮播	`prev-margin` / `next-margin`
卡片缩放	`card3d`	当前项放大，前后项缩小偏移	`scale-range`、`prev-margin`
堆叠轮播	`stack3d`	前后项向下堆叠	`stack-offset`、`scale-range`
文字动画	`animation`	文字随切换改变位置与透明度	`text-offset-x`、`text-offset-y`

Props

参数	类型	默认值	说明
`list`	Array	`[]`	数据源，元素为 `{ image, title, desc }`
`mode`	String	`plane`	展示模式：`plane` / `card3d` / `stack3d` / `animation`
`current`	Number	`0`	当前索引，支持 `:current.sync` 或 `v-model:current`
`autoplay`	Boolean	`true`	是否自动播放
`interval`	Number	`3500`	自动播放间隔（ms）
`duration`	Number	`450`	滑动动画时长（ms）
`circular`	Boolean	`true`	是否衔接滑动
`prevMargin`	String	按模式自动	前一项露出距离，如 `100rpx`
`nextMargin`	String	按模式自动	后一项露出距离，如 `100rpx`
`height`	String	`340rpx`	容器高度
`radius`	String	`16rpx`	圆角
`showIndicators`	Boolean	`true`	是否显示指示器
`indicatorActiveColor`	String	`#FFFFFF`	指示器选中色
`indicatorColor`	String	`rgba(255,255,255,0.45)`	指示器默认色
`scaleRange`	Array	`[1, 0.86, 0.72]`	3D 模式缩放比例：当前项、相邻项、更远项
`stackOffset`	Number	`24`	堆叠模式横向偏移量（rpx）
`textOffsetX`	Number	`0`	非当前项文字横向偏移（rpx）
`textOffsetY`	Number	`30`	非当前项文字纵向偏移（rpx）
`textTransitionDuration`	Number	`450`	文字动画时长（ms）

Events

事件名	参数	说明
`change`	`index`	当前索引变化时触发
`update:current`	`index`	配合 `v-model:current` 使用

Slots

插槽名	作用域参数	说明
`item`	`{ item, index }`	完全自定义单个轮播项内容

<minetel-carousel :list="list" mode="card3d" height="400rpx">
  <template #item="{ item, index }">
    <view class="custom-card">
      <image :src="item.image" mode="aspectFill" class="custom-img" />
      <text class="custom-label">{{ index + 1 }} · {{ item.title }}</text>
    </view>
  </template>
</minetel-carousel>

方法

通过 ref 调用：

<minetel-carousel ref="carousel" :list="list" />

<script>
this.$refs.carousel.next()   // 下一张
this.$refs.carousel.prev()   // 上一张
this.$refs.carousel.goTo(2)  // 跳转到指定索引
</script>

平台兼容性

平台	plane	card3d	stack3d	animation	备注
H5	✅	✅	✅	✅	全支持
微信小程序	✅	✅	✅	✅	伪 3D，表现稳定
App（vue 渲染）	✅	✅	✅	✅	规避 iOS WebView 的 `preserve-3d` 缺陷
App（nvue）	⚠️	❌	❌	⚠️	nvue 请改用 vue 渲染页面
uni-app x	✅	✅	✅	✅	基础 transform 均支持

常见问题

Q：为什么组件在小程序里高度是 0？ swiper 必须有确定高度，请为组件传入 height，或在外层容器设置固定高度。

Q：H5 端 3D 效果比小程序弱？ 为保证全平台一致，组件采用伪 3D（scale + translate + z-index），未使用 preserve-3d。如需更强的真 3D，可自行在 itemInnerStyle 中扩展 rotateY。

Q：文字动画卡顿？ 文字位置由 CSS transition 驱动，不依赖 JS 逐帧。若列表项过多，建议把 duration 控制在 500ms 以内，并减少同时可见的项数。

Q：能否动态修改 list？ 支持。list 变化时组件会自动校验当前索引是否越界并重置。

更新日志

见 changelog.md

License

MIT