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

前言

因为经常用到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 参数

3.Events事件

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><viewclass="content"><viewclass="text-area title">宽度：700rpx；高度：420rpx；其余为默认值的banner（图片、视频、图片）</view><una-banner:list="bannerList"width="700rpx"height="420rpx"@click="onBannerClick"/><viewclass="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';constbannerList=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'}]);constbannerList1=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'}]);constonBannerClick=({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 】上传资源组件｜ 图片上传｜视频上传｜混传

快速通道

4.【Uniapp 插件 una-img-cropper 】 支持自定义裁剪比例、拖拽缩放调整画面，可导出指定尺寸与画质的图片，跨端兼容，适用于头像上传、图片裁切等业务场景。

快速通道