xt-swiper轮播图自定义指示器自定义显示内容

更新记录

1.0.3（2025-06-12）下载此版本

修复轮播图部分情况抖动的问题

1.0.2（2025-03-14）下载此版本

修复指示器过少时不居中问题

1.0.1（2025-03-14）下载此版本

1.禁止图片拖动 2.禁止图片在微信小程序中长按识别

平台兼容性

uni-app

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

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

其他

多语言	暗黑模式	宽屏模式
×	×	√

Swiper 轮播图

组件名: xt-swiper

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>;

vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

<template>
    <view class="xt">
        <view>
            <view>基础使用</view>
            <xt-swiper :list="list"></xt-swiper>
        </view>
        <view>
            <view>加载中</view>
            <xt-swiper loading :list="list"></xt-swiper>
        </view>
        <view>
            <view>箭头指示器</view>
            <xt-swiper indicatorType="arrow" :list="list"></xt-swiper>
        </view>
        <view>
            <view>纵向轮播</view>
            <xt-swiper vertical indicatorType="arrow" :list="list"></xt-swiper>
        </view>
        <view>
            <view>自定义指示器</view>
            <xt-swiper :list="list" @change="change">
                <template #indicator>
                    <view style="position: absolute; top: 0; right: 0">{{ index }}/{{ list.length }}</view>
                </template>
            </xt-swiper>
        </view>
        <view>
            <view>自定义显示内容</view>
            <xt-swiper :list="list" :indicator="false">
                <template #default="{ item }">
                    <view style="position: relative">
                        <xt-image :src="item.url" width="100%" height="350rpx"></xt-image>
                        <view style="position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.6); color: #f2f2f2; text-align: center">
                            轮播图{{ item.index }}
                        </view>
                    </view>
                </template>
            </xt-swiper>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/05/08/11/56/62242914_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/04/27/22/38/75726416_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/08/15/10/14/48456097_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/18/56402703_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/05/16/11/10/68198008_p0_master1200.jpg',
                'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/31/83314745_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/10/11/11/58/61524931_p0_master1200.jpg',
                'http://img9.vilipix.com/picture/pages/regular/2021/08/15/10/14/48456097_p0_master1200.jpg'
            ],
            index: 1
        };
    },
    methods: {
        load() {
            this.loading = !this.loading;
        },
        change(e) {
            this.index = e.current + 1;
        },
        click(e) {
            console.log(e);
        }
    }
};
</script>

<style lang="scss">
.xt {
    padding: 0 20rpx;
    padding-bottom: 100rpx;
    display: flex;
    flex-direction: column;
}
</style>

API

属性	类型	说明	默认值
`list`	`Array`	显示的图片列表	`[]`
`height`	`String`	轮播图的高度	`350rpx`
`imgMode`	`String`	图片裁切模式	`aspectFill`
`bgColor`	`String`	轮播图的背景颜色	`#ffffff`
`radius`	`String \|Number`	轮播图的圆角	`0rpx`
`indicator`	`Boolean`	是否显示指示器	`true`
`indicatorType`	`String`	指示器类型, 可选 `dot`、`arrow`	`dot`
`indicatorCount`	`Number`	指示器显示到多少时翻页	`5`
`indicatorActiveColor`	`String`	dot指示器激活时的颜色, arrow时的背景颜色	`#ffffff`
`indicatorInactiveColor`	`String`	dot指示器未激活时的颜色, arrow时的箭头颜色	`#CAD2DE`
`previousMargin`	`String \|Number`	前边距，可用于露出前一项的一小部分	`0`
`nextMargin`	`String \|Number`	后边距，可用于露出后一项的一小部分	`0`
`interval`	`Number`	自动切换时间间隔ms	`5000`
`displayMultipleItems`	`Number`	同时显示的滑块数量	`1`
`duration`	`Number`	滑动动画时长ms	`500`
`current`	`Number`	当前所在滑块的index	`0`
`autoplay`	`Boolean`	自动切换	`true`
`skipHiddenItemLayout`	`Boolean`	是否跳过未显示的滑块布局	`false`
`disableTouch`	`Boolean`	是否禁止用户滑动操作	`false`
`acceleration`	`Boolean`	是否根据滑动速度，连续滑动多屏	`false`
`circular`	`Boolean`	是否采用衔接滑动，即播放到末尾后重新回到开头	`false`
`easingFunction`	`String`	指定swiper切换缓动动画类型, 可选 `default`、`linear`、`easeInCubic`、`easeOutCubic`、`easeInOutCubic`	`default`
`loading`	`Boolean`	是否加载中	`false`
`vertical`	`Boolean`	滑动方向是否为纵向	`false`
`skipHiddenItemLayout`	`Boolean`	是否跳过被隐藏的滑项布局	`false`
`disableProgrammaticAnimation`	`Boolean`	是否禁用代码变动触发swiper切换时使用动画	`false`
`opacity`	`Number`	遮罩层透明度	`0.8`
`loadBGColor`	`String`	遮罩层颜色	`#c0c1c2`
`keyName`	`String`	list数组中指定对象的目标属性名	`url`
`stop`	`Boolean`	是否阻止事件冒泡	`false`

Event

事件名	类型	描述
`click`	`Function`	点击事件
`change`	`Function`	内容切换时触发
`animationfinish`	`Function`	动画结束时会触发`animationfinish` 事件

xt-swiper轮播图自定义指示器自定义显示内容自定义指示器

更新记录

1.0.3（2025-06-12）下载此版本

1.0.2（2025-03-14）下载此版本

1.0.1（2025-03-14）下载此版本

平台兼容性

uni-app

其他

Swiper 轮播图

组件名: xt-swiper

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

基本用法

API

Event

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

xt-parse富文本解析

日历组件xt-calendar可选择年与月切换支持左右滑动加载年份月份

xt-picker滚动选择器

xt-upload上传组件支持多种类型文件

xt-table表格组件可固定表头选择框合计行固定行

xt-swiper轮播图自定义指示器自定义显示内容 自定义指示器

更新记录

1.0.3（2025-06-12） 下载此版本

1.0.2（2025-03-14） 下载此版本

1.0.1（2025-03-14） 下载此版本

平台兼容性

uni-app

其他

Swiper 轮播图

组件名: xt-swiper

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

基本用法

API

Event

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

xt-parse富文本解析

日历组件xt-calendar可选择年与月切换支持左右滑动加载年份月份

xt-picker滚动选择器

xt-upload上传组件支持多种类型文件

xt-table表格组件可固定表头选择框合计行固定行

Modal title

xt-swiper轮播图自定义指示器自定义显示内容自定义指示器

1.0.3（2025-06-12）下载此版本

1.0.2（2025-03-14）下载此版本

1.0.1（2025-03-14）下载此版本