前言因为经常用到banner组件懒得每个项目都封装一个了就尝试自己写了一个插件欢迎大家使用后点评有需要改善的地方请说出后续会把开源代码发布出来。本篇就是告诉大家如何引入使用的。到 Uniapp 的插件市场搜索 una-banner快速通道https://ext.dcloud.net.cn/search?quna-bannerorderByRelevanceuni-app-platformsuni-app-x-platforms文章目录前言一、 插件介绍1.✨ 特性2. Props 参数3.Events事件4. 注意事项二、插件使用示例1. 下载路径2. 引入组件1方法一放入uni_modules2放入components3. 在微信小程序中的运行三、其他插件文章1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框3.【Uniapp 插件 una-upload-resource 】上传资源组件 图片上传视频上传混传4.【Uniapp 插件 una-img-cropper 】 支持自定义裁剪比例、拖拽缩放调整画面可导出指定尺寸与画质的图片跨端兼容适用于头像上传、图片裁切等业务场景。一、 插件介绍1.✨ 特性支持图片/视频混合轮播可配置自动播放、循环播放、播放速度自定义指示器样式位置、颜色、大小支持点击事件回调与页面跳转适配微信/支付宝/抖音/百度等多端小程序基于 Vue3 组合式 API性能更优2. Props 参数参数类型默认值说明listArray[]轮播数据列表每项需包含 id、typeimage/video、urlautoplayBooleantrue是否自动播放intervalNumber3000自动播放间隔mscircularBooleantrue是否循环播放indicator-dotsBooleantrue是否显示指示器indicator-colorString#ffffff指示器激活颜色indicator-inactive-colorStringrgba(255,255,255,0.5)指示器未激活颜色durationNumber500滑动动画时长ms3.Events事件事件名回调参数说明click(item: Object) void点击轮播项时触发返回当前项数据change(current: Number) void轮播项切换时触发返回当前索引4. 注意事项视频轮播仅支持小程序原生video标签能力部分端可能存在兼容性差异图片格式建议使用https协议图片避免跨域问题性能优化轮播项数量建议 ≤ 5避免内存占用过高多端适配已适配微信 / 支付宝 / 抖音 / 百度小程序H5 端需额外测试二、插件使用示例1. 下载路径https://ext.dcloud.net.cn/plugin?id27157#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 文案超过一行省略效果如图具体代码如下templateviewclasscontentviewclasstext-area title宽度700rpx高度420rpx其余为默认值的banner图片、视频、图片/viewuna-banner:listbannerListwidth700rpxheight420rpxclickonBannerClick/viewclasstext-area title宽度700rpx高度420rpx无蒙层自定义dot的大小、颜色图片容器背景色title颜色、subTitle颜色图片、图片/viewuna-banner:listbannerList1width700rpxheight420rpx:is-show-maskerfalsebackgroundColorrgba(88, 255, 224, 0.4)titleColor#ea75f5subTitleColor#837ff1dot-width12rpxdot-height12rpxdot-active-color#00ffbddot-colorrgba(88, 255, 224, 0.4)clickonBannerClick//view/templatescript setupimport{ref}fromvue;constbannerListref([{id:1,type:image,image:https://hk.thefuturerocks.com/cdn/shop/files/tangri-ring-458406.png?v1737780318,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}]);constbannerList1ref([{id:1,type:image,image:https://hk.thefuturerocks.com/cdn/shop/files/tangri-ring-458406.png?v1737780318,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);};/scriptstyle .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 】 支持自定义裁剪比例、拖拽缩放调整画面可导出指定尺寸与画质的图片跨端兼容适用于头像上传、图片裁切等业务场景。快速通道
【Uniapp 插件 una-banner 】轮播图 / banner / swiper
发布时间：2026/6/10 20:08:10
前言因为经常用到banner组件懒得每个项目都封装一个了就尝试自己写了一个插件欢迎大家使用后点评有需要改善的地方请说出后续会把开源代码发布出来。本篇就是告诉大家如何引入使用的。到 Uniapp 的插件市场搜索 una-banner快速通道https://ext.dcloud.net.cn/search?quna-bannerorderByRelevanceuni-app-platformsuni-app-x-platforms文章目录前言一、 插件介绍1.✨ 特性2. Props 参数3.Events事件4. 注意事项二、插件使用示例1. 下载路径2. 引入组件1方法一放入uni_modules2放入components3. 在微信小程序中的运行三、其他插件文章1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框3.【Uniapp 插件 una-upload-resource 】上传资源组件 图片上传视频上传混传4.【Uniapp 插件 una-img-cropper 】 支持自定义裁剪比例、拖拽缩放调整画面可导出指定尺寸与画质的图片跨端兼容适用于头像上传、图片裁切等业务场景。一、 插件介绍1.✨ 特性支持图片/视频混合轮播可配置自动播放、循环播放、播放速度自定义指示器样式位置、颜色、大小支持点击事件回调与页面跳转适配微信/支付宝/抖音/百度等多端小程序基于 Vue3 组合式 API性能更优2. Props 参数参数类型默认值说明listArray[]轮播数据列表每项需包含 id、typeimage/video、urlautoplayBooleantrue是否自动播放intervalNumber3000自动播放间隔mscircularBooleantrue是否循环播放indicator-dotsBooleantrue是否显示指示器indicator-colorString#ffffff指示器激活颜色indicator-inactive-colorStringrgba(255,255,255,0.5)指示器未激活颜色durationNumber500滑动动画时长ms3.Events事件事件名回调参数说明click(item: Object) void点击轮播项时触发返回当前项数据change(current: Number) void轮播项切换时触发返回当前索引4. 注意事项视频轮播仅支持小程序原生video标签能力部分端可能存在兼容性差异图片格式建议使用https协议图片避免跨域问题性能优化轮播项数量建议 ≤ 5避免内存占用过高多端适配已适配微信 / 支付宝 / 抖音 / 百度小程序H5 端需额外测试二、插件使用示例1. 下载路径https://ext.dcloud.net.cn/plugin?id27157#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 文案超过一行省略效果如图具体代码如下templateviewclasscontentviewclasstext-area title宽度700rpx高度420rpx其余为默认值的banner图片、视频、图片/viewuna-banner:listbannerListwidth700rpxheight420rpxclickonBannerClick/viewclasstext-area title宽度700rpx高度420rpx无蒙层自定义dot的大小、颜色图片容器背景色title颜色、subTitle颜色图片、图片/viewuna-banner:listbannerList1width700rpxheight420rpx:is-show-maskerfalsebackgroundColorrgba(88, 255, 224, 0.4)titleColor#ea75f5subTitleColor#837ff1dot-width12rpxdot-height12rpxdot-active-color#00ffbddot-colorrgba(88, 255, 224, 0.4)clickonBannerClick//view/templatescript setupimport{ref}fromvue;constbannerListref([{id:1,type:image,image:https://hk.thefuturerocks.com/cdn/shop/files/tangri-ring-458406.png?v1737780318,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}]);constbannerList1ref([{id:1,type:image,image:https://hk.thefuturerocks.com/cdn/shop/files/tangri-ring-458406.png?v1737780318,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);};/scriptstyle .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 】 支持自定义裁剪比例、拖拽缩放调整画面可导出指定尺寸与画质的图片跨端兼容适用于头像上传、图片裁切等业务场景。快速通道
