# una-banner

**Repository Path**: una_0903/una-banner

## Basic Information

- **Project Name**: una-banner
- **Description**: 基于 Vue3 组合式 API，Uniapp开发的插件

支持图片/视频混合轮播
可配置自动播放、循环播放、播放速度
自定义指示器样式（位置、颜色、大小）
支持点击事件回调与页面跳转
适配微信/支付宝/抖音/百度等多端小程序

- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-10
- **Last Updated**: 2026-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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/`即可。

具体使用见： https://blog.csdn.net/qq_45954390/article/details/158885029?fromshare=blogdetail&sharetype=blogdetail&sharerId=158885029&sharerefer=PC&sharesource=&sharefrom=from_link

## 使用示例

```vue
<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

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| list | Array | [] | 轮播数据 |
| width | String \| Number | 100% | Banner 宽度 |
| height | String \| Number | 360rpx | Banner 高度 |
| backgroundColor | String | #E8E8E8 | Banner 背景色 |
| isShowMasker | Boolean | true | 是否显示固定渐变蒙层 |
| showDot | Boolean | true | 是否显示 dot |
| dotWidth | String \| Number | 24rpx | dot 宽度 |
| dotHeight | String \| Number | 6rpx | dot 高度 |
| dotRadius | String \| Number | 9999rpx | dot 圆角 |
| dotGap | String \| Number | 10rpx | dot 间距 |
| dotActiveColor | String | #FFFFFF | active dot 颜色 |
| dotColor | String | rgba(255, 255, 255, 0.45) | 非 active dot 颜色 |
| titleColor | String | #FFFFFF | 标题颜色 |
| subTitleKey | String | subTitle | 右下角副标题字段 |
| subTitleColor | String | #FFFFFF | 副标题颜色 |
| subTitleFontSize | String \| Number | 24rpx | 副标题字号 |
| idKey | String | id | 列表唯一键字段 |
| imageKey | String | image | 资源地址字段（图片/视频） |
| titleKey | String | title | 标题字段 |
| mediaTypeKey | String | type | 资源类型字段，值可为 image/video |
| videoObjectFit | String | contain | 视频适配方式 |
| videoControls | Boolean | false | 视频控件 |
| videoAutoplay | Boolean | false | 视频自动播放 |
| videoLoop | Boolean | true | 视频循环 |
| videoMuted | Boolean | true | 视频静音 |
| videoShowCenterPlayBtn | Boolean | true | 视频中心播放按钮 |
| current | Number | 0 | 当前索引（支持 `v-model:current`） |
| autoplay | Boolean | true | 自动播放 |
| interval | Number | 3000 | 自动切换间隔 |
| duration | Number | 500 | 动画时长 |
| circular | Boolean | true | 是否衔接滑动 |

> 说明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 })`：点击当前项