更新记录

1.0.0（2026-10-28）

• 首次发布
• 支持 12 种轮播风格：classic、fade、card、gallery、coverflow、carousel3d、split、thumbnail、fullscreen、story、grid、infinite
• 支持自动播放、循环、指示点、圆角、图片裁剪模式等配置
• 支持 change、click 事件与手势滑动

平台兼容性

uni-app(4.33)

lunbotu 多风格轮播图

一个 mode 参数即可在 12 种轮播风格之间切换的 uni-app 轮播图组件，纯 vue 实现，无需额外依赖。

特性

• 12 种风格一键切换，数据源与用法完全一致
• 支持自动播放、循环、指示点、圆角、图片裁剪模式等常用配置
• 支持点击、切换事件，支持手动左右滑动（含 3D 风格）
• 基于 uni_modules 规范，Vue2 / Vue3 均可使用（app-vue、H5、各家小程序）

安装

将 uni_modules/lunbotu 整个目录拷贝到你的 uni-app 项目根目录下的 uni_modules 中，即可通过 easycom 自动引入（无需 import 与注册）：

<lunbotu :list="list" mode="classic"></lunbotu>

也可以显式引入：

import lunbotu from '@/uni_modules/lunbotu/components/lunbotu/lunbotu.vue'

export default {
    components: { lunbotu }
}

快速使用

<template>
    <view class="page">
        <lunbotu
            :list="list"
            mode="coverflow"
            :height="420"
            :interval="3000"
            :autoplay="true"
            :loop="true"
            @change="onChange"
            @click="onClick"
        ></lunbotu>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    { image: 'https://example.com/1.jpg', title: '第一张', desc: '描述文字' },
                    { image: 'https://example.com/2.jpg', title: '第二张', desc: '描述文字' }
                ]
            }
        },
        methods: {
            onChange(e) {
                console.log('当前索引', e.index)
            },
            onClick(e) {
                console.log('点击了第', e.index, '张', e.item)
            }
        }
    }
</script>

风格一览

属性

事件

index 为数据条目索引；page 为当前轮播单元（grid 风格下为页索引，其余与 index 相同）。

数据项结构

{
    image: '',    // 图片地址，兼容 url / src 字段
    title: '',    // 标题，可选
    desc: '',     // 描述，可选
    tag: ''       // 业务自定义字段，可自由扩展
}

说明

• thumbnail 风格高度由主图决定，缩略图自动追加在主图下方，组件根部高度自适应。
• fullscreen 风格建议传 height="100vh"。
• grid 风格每页 3 张：左（或右）一大图 + 右侧两小图，按页切换。
• infinite 风格会把列表复制一份实现无缝滚动，autoplay 为 false 时动画暂停。
• 3D 风格（coverflow、carousel3d）与 fade、split、thumbnail、story、grid 支持手势左右滑动。