更新记录

1.0.1（2026-03-10） 下载此版本

1.0.1 (2026.03.10)

修改readme目录

1.0.0 （2026.03.10）

初始版本

1.0.0（2026-03-10） 下载此版本

1.0.0（2026-03-10）

组件初版

平台兼容性

uni-app(4.87)

una-banner

基于 uni-app + Vue3 <script setup> 的小程序 Banner 组件，支持：

• Banner 宽度可自定义（默认 100%）
• 可自定义高度
• 支持图片和视频混合，自动按资源类型渲染
• 资源在容器内长边适配（contain / aspectFit）
• 图片右下角展示 subTitle
• 图片可加蒙层，支持属性控制显示/隐藏
• 可自定义 dot 的宽高、间距、圆角
• 可自定义 dot 的 active 和非 active 颜色
• dot 上方标题超出一行自动省略
• 默认背景色 #E8E8E8

目录结构

将 una-banner 复制到你的 uni-app 项目中uni_modules/即可。

使用示例

<template>
    <view class="page">
        <una-banner
            :list="bannerList"
            width="700rpx"
            height="420rpx"
            :is-show-masker="true"
            dot-width="26rpx"
            dot-height="6rpx"
            dot-active-color="#FFFFFF"
            dot-color="rgba(255,255,255,0.4)"
            @click="onBannerClick"
        />
    </view>
</template>

<script setup>
import { ref } from 'vue';

const bannerList = ref([
    {
        id: 1,
        type: 'image',
        image: 'https://hk.thefuturerocks.com/cdn/shop/files/tangri-ring-458406.png?v=1737780318',
        title: 'Tangri ring',
        subTitle: 'HK$2,550.00'
    },
    {
        id: 2,
        type: 'video',
        image: 'https://www.w3schools.com/html/mov_bbb.mp4',
        title: '品牌视频展示',
        subTitle: 'Video'
    },
    {
        id: 3,
        type: 'image',
        image: 'https://www.vancleefarpels.com/content/dam/rcq/vca/mi/YP/S-/M2/T9/Kt/gG/hP/R8/aX/gQ/miYPS-M2T9KtgGhPR8aXgQ.png',
        title: 'Frivole pendant, 3 flowers, mini model',
        subTitle: 'HK$2,550.00'
    }
]);

const onBannerClick = ({ item, index }) => {
    console.log('click banner =>', index, item);
};
</script>

<style scoped>
.page {
    padding: 24rpx;
}
</style>

Props

说明1：若未传 type，组件会根据资源地址后缀自动判断是否视频（如 .mp4/.mov/.webm/.m3u8）。
说明2：蒙层样式固定为 linear-gradient(180deg, rgba(231, 231, 231, 0) 40%, rgba(0, 0, 0, 0.4) 91%)，通过 isShowMasker 控制显隐。

Events

• change(index)：轮播切换
• update:current(index)：双向绑定回调
• click({ item, index })：点击当前项