更新记录

2.0.0（2026-11-11） 下载此版本

fix

1.0.2（2026-11-11） 下载此版本

增加支持自定义指示器、标题遮罩、图片容错、触摸暂停、懒加载与受控切换

1.0.1（2024-11-25） 下载此版本

新增：click事件 新增：错误图设置 修复：图片error的触发导致其他的都设置为错误图

平台兼容性

uni-app x(5.34)

其他

gm-swiper

基于 uni-app x（uvue）的轮播组件，支持自定义指示器、标题遮罩、图片容错、触摸暂停、懒加载与受控切换。

使用说明

<template>
    <gm-swiper :items="banner" :height="160" :radius="12" indicator="dot" @click="onClick" @change="onChange" />
</template>

<script setup lang="uts">
    import { ref } from 'vue'

    const banner = ref<Array<any>>([
        { id: 1, src: 'https://example.com/1.png', title: '第一张' },
        { id: 2, src: 'https://example.com/2.png', title: '第二张' }
    ])

    function onClick(index : number, item : any) {
        console.log('click', index, item)
    }

    function onChange(index : number) {
        console.log('change', index)
    }
</script>

基础用法（v-model 受控 + 方法调用）

<gm-swiper ref="swiperRef" v-model="current" :items="banner" indicator="number" show-title />

const swiperRef = ref<any>(null)

swiperRef.value?.prev()
swiperRef.value?.next()
swiperRef.value?.goTo(2)

参数说明

事件

方法

通过组件 ref 调用：

从 1.x 升级

说明：1.x 中图片加载失败会直接改写传入的 list 数据，2.x 改为组件内部记录错误索引，不再污染业务数据。