更新记录

1.0.5（2024-07-03） 下载此版本

增加数字指示器类型

1.0.4（2024-07-02） 下载此版本

完善使用示例

1.0.3（2024-07-02） 下载此版本

增加轮播点击事件

平台兼容性

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

注：暴露了swiper使用率高的参数和方法,详见官方文挡：swiper