更新记录

1.0.9（2025-09-09） 下载此版本

当swiper只有一个的时候，不显示底部指示器

1.0.8（2025-05-14） 下载此版本

更新说明文挡

1.0.7（2025-05-13） 下载此版本

解决部分小程序banner显示异常问题

平台兼容性

uni-app(4.07)

hbxw-swiper组件

介绍

方了更方便使用swiper实现图片轮播效果，特封此组件

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view class="swiper-container">
        <text class="test-title">swiper示例0</text>
        <hbxw-swiper 
            :list="list" 
            indicatorType="circle" 
            :previousMargin="0" 
            :nextMargin="0" 
            :padding="0"
            :height="300"
            @change="swiperChange"
            @click="swiperItemClick"
        ></hbxw-swiper>
        <text class="test-title">swiper示例1</text>
        <hbxw-swiper :list="list" indicatorType="circle"></hbxw-swiper>
        <text class="test-title">swiper示例2</text>
        <hbxw-swiper :list="list" indicatorType="square"></hbxw-swiper>
        <text class="test-title">swiper示例3</text>
        <hbxw-swiper :list="list0" indicatorType="progress"></hbxw-swiper>
        <text class="test-title">swiper示例4</text>
        <hbxw-swiper :list="list0" indicatorType="number"></hbxw-swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE0',
                        title: 'EXAMPLE0'
                    },{
                        img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE1',
                        title: 'EXAMPLE1'
                    },{
                        img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE2',
                        title: 'EXAMPLE2'
                    },{
                        img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE3',
                        title: 'EXAMPLE3'
                    }
                ],
                list0: [
                    {
                        img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE0'
                    },{
                        img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE1'
                    },{
                        img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE2'
                    },{
                        img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE3'
                    }
                ],
            }
        },
        methods: {
            swiperChange(e) {
                console.log('---- swiperChange ----:', e);
            },
            swiperItemClick(item) {
                console.log('---- swiperItemClick ----:', item);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .test-title{
        font-size: 32rpx;
        font-weight: 700;
        line-height: 56rpx;
        padding: 20rpx 10rpx;
        color: #111111;
    }
    .swiper-container{
        padding-bottom: 64rpx;
    }
</style>

API

Props

Events

Slots

注意事项

1. 暴露了swiper使用率高的参数和方法,详见官方文挡：swiper
2. 组件源码很小的，显示大是因为有示例图片，真正打包到项目中的是很小的，请放心使用