更新记录

1.0.0（2025-05-27）

新增

平台兼容性

Banner Swiper 轮播图组件

一个功能强大、高度可定制的 Banner 轮播图组件，支持自定义指示器和插槽内容。

平台兼容性

基础用法

默认用法（显示图片）

<template>
    <banner-swiper :bannerList="bannerList"></banner-swiper>
</template>

<script>
export default {
    data() {
        return {
            bannerList: [
                {
                    Picture: '图片地址',
                    LinkUrl: '点击跳转链接'
                },
                 {
                    Picture: '另一张图片地址',
                    LinkUrl: '另一个跳转链接'
                }
            ]
        }
    }
}
</script>

使用插槽自定义内容

可以通过默认插槽来自定义每个轮播项的内容。插槽会暴露 item (当前轮播项的数据) 和 index (当前轮播项的索引) 给您使用。

<template>
    <banner-swiper :bannerList="bannerList">
        <template v-slot:default="{ item, index }">
            <!-- 在这里放置您的自定义内容 -->
            <view class="custom-item">
                <text>{{ item.Title || '自定义内容 ' + index }}</text>
                <!-- 您可以根据 item 数据渲染任何内容 -->
                <image v-if="item.Picture" :src="item.Picture" mode="aspectFill" class="custom-image"></image>
                <!-- 也可以添加点击事件等 -->
                <button @click="handleCustomClick(item)">点击</button>
            </view>
        </template>
    </banner-swiper>
</template>

<script>
export default {
    data() {
        return {
            bannerList: [
                { id: 1, Title: '商品A', Picture: '图片A地址', LinkUrl: '页面A' },
                { id: 2, Title: '商品B', Picture: '图片B地址', LinkUrl: '页面B' }
            ]
        }
    },
    methods: {
        handleCustomClick(item) {
            console.log('点击了自定义内容', item);
            // 处理点击逻辑，例如跳转页面
            if (item.LinkUrl) {
                 uni.navigateTo({
                     url: item.LinkUrl
                 });
             }
        }
    }
}
</script>

<style>
.custom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #eee;
    font-size: 30rpx;
}
.custom-image {
    width: 80%;
    height: 80%;
    margin-top: 20rpx;
}
</style>

API

Props

Events

自定义样式

组件提供了以下类名供自定义样式：

• .banner-container: 轮播图容器
• .banner-swiper: 轮播图主体
• .banner-image: 轮播图片
• .custom-indicator-container: 指示器容器
• .indicator-background: 指示器背景
• .indicator-foreground: 指示器前景
• .custom-item: 插槽内的自定义内容容器示例类名
• .custom-image: 插槽内图片示例类名

示例

自定义高度和指示器样式

<template>
    <banner-swiper 
        :bannerList="bannerList"
        height="500rpx"
        indicatorWidth="300rpx"
        indicatorHeight="6rpx"
        indicatorBottom="20rpx"
        indicatorBgColor="rgba(255, 255, 255, 0.3)"
        indicatorActiveColor="#ff0000"
    ></banner-swiper>
</template>

自定义轮播图行为

<template>
    <banner-swiper 
        :bannerList="bannerList"
        :autoplay="true"
        :interval="5000"
        :duration="800"
        :circular="true"
        :display-multiple-items="1"
        :next-margin="'20rpx'"
        :previous-margin="'20rpx'"
        :vertical="false"
    ></banner-swiper>
</template>

版本说明

• 标准版：5.99元

  • 包含基础轮播图功能
  • 自定义指示器
  • 弹簧动画效果

• 源码版：19.99元

  • 包含标准版所有功能
  • 提供完整源代码
  • 支持自定义修改
  • 提供技术支持

联系方式

• QQ：1981308200