更新记录

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

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

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

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

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

发布初版

平台兼容性

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

Event