前言

因为经常用到banner组件，懒得每个项目都封装一个了，就尝试自己写了一个插件，欢迎大家使用后点评，有需要改善的地方请说出，后续会把开源代码发布出来。
本篇就是告诉大家如何引入使用的。

到 Uniapp 的插件市场，搜索 una-banner
快速通道：https://ext.dcloud.net.cn/search?q=una-banner&orderBy=Relevance&uni-app-platforms=&uni-app-x-platforms=

一、 插件介绍

1.✨ 特性

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

2. Props 参数

参数	类型	默认值	说明
list	Array	[]	轮播数据列表，每项需包含 id、type（image/video）、url
autoplay	Boolean	true	是否自动播放
interval	Number	3000	自动播放间隔（ms）
circular	Boolean	true	是否循环播放
indicator-dots	Boolean	true	是否显示指示器
indicator-color	String	#ffffff	指示器激活颜色
indicator-inactive-color	String	rgba(255,255,255,0.5)	指示器未激活颜色
duration	Number	500	滑动动画时长（ms）

3.Events事件

事件名	回调参数	说明
click	(item: Object) => void	点击轮播项时触发，返回当前项数据
change	(current: Number) => void	轮播项切换时触发，返回当前索引

4. 注意事项

• 视频轮播：仅支持小程序原生 video 标签能力，部分端可能存在兼容性差异
• 图片格式：建议使用 https 协议图片，避免跨域问题
• 性能优化：轮播项数量建议 ≤ 5，避免内存占用过高
• 多端适配：已适配微信 / 支付宝 / 抖音 / 百度小程序，H5 端需额外测试

二、插件使用示例

1. 下载路径

https://ext.dcloud.net.cn/plugin?id=27157#rating

这个广告30s，相当于激励俺继续维护，大部分插件都是这么设置了，大家在观看的时候页面不要关闭，看完在手机上关闭广告，等待uni变更状态就行。

手机端显示：
观看完毕后，点击关闭，等待状态文字变更，再关闭这个uni的小程序。

电脑端就会有个alert，是否运行打开Hbuilderx，点击允许，就跳到HbuilderX中了。选择你要导入的项目

tip： 可以只打开一个窗口，窗口内就一个项目，这样识别会好一些。
我再同一个窗口内，多开了几个项目，有几次没检测到，我又重新看了广告。

点击“确认”，查看此时在哪个目录里。
【注意】因为uniapp修改了传入的目录结构，我的项目结构为 components/una-banner，若有冲突，保证自己的项目不被影响的前提下，点击忽略冲突，别替换了自己项目的文件

2. 引入组件

1）方法一：放入uni_modules

在 uni_modules中新建一个目录una-banner，将下载的 componets下的文件都放入这个目录中。如图：

2）放入components

可以删除无用的 文件，如package.json 、 README.md。

这里我留着是示例如果有同学需要看的话，就放入这个文件夹里，不然自己的其他组件多了之后不好管理文件。

3. 在微信小程序中的运行

案例对照：

上面一组：

• 宽度：700rpx；
• 高度：420rpx；
• 其余为默认值的banner
• 资源demo：图片、视频、图片

下面一组：

• 宽度：700rpx；
• 高度：420rpx；
• 无蒙层，自定义dot的大小、颜色，图片容器背景色，title颜色、subTitle颜色
• 资源demo：图片、图片
  

title 文案超过一行省略

效果如图，具体代码如下：

<template>
	<view class="content">
		<view class="text-area title">
			宽度：700rpx；高度：420rpx；其余为默认值的banner（图片、视频、图片）
		</view>
		<una-banner
			:list="bannerList"
			width="700rpx"
			height="420rpx"
			@click="onBannerClick"
		/>
		<view class="text-area title">
			宽度：700rpx；高度：420rpx；无蒙层，自定义dot的大小、颜色，图片容器背景色，title颜色、subTitle颜色（图片、图片）
		</view>
		<una-banner
			:list="bannerList1"
			width="700rpx"
			height="420rpx"
			:is-show-masker="false"
			backgroundColor="rgba(88, 255, 224, 0.4)"
			titleColor="#ea75f5"
			subTitleColor="#837ff1"
			dot-width="12rpx"
			dot-height="12rpx"
			dot-active-color="#00ffbd"
			dot-color="rgba(88, 255, 224, 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 bannerList1 = 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: '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 modelFrivole pendant, 3 flowers, mini model',
		subTitle: 'HK$2,550.00'
	}
]);

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

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		width: 100%;
		text-align: center;
		padding: 10rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

如果大家用着不错，可以动动手指打赏俺，有问题可以私信我，需要qq群维护也请留言，多的话，我再建群哦

三、其他插件文章

1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper

快速通道

2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框

快速通道

3.【Uniapp 插件 una-upload-resource 】上传资源组件｜ 图片上传｜视频上传｜混传

快速通道