更新记录
1.0.0(2024-05-28)
下载此版本
1、实现了可以滚动的标签云功能。
2、可以点击标签触发事件。
3、添加了动态计算标签云总宽度的功能。
4、标签云支持对应样式属性(字体大小、颜色、背景色)的设置、速度设置。
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.0 |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
√ |
× |
√ |
× |
× |
skywang-tagCloud
1 简介
- tagCloud 是一款基于 Vue.js 开发的动态滚动标签组件,旨在为用户提供平滑滚动的标签展示效果,常用于导航、热门标签等场景。该组件不仅能够展示实际数据,还能通过复制数据实现循环滚动的视觉效果,增强页面动感。
- 该插件目前只确认兼容H5和微信小程序其他不确定,并且在HBuilderX或者微信开发者工具中运行默认无法触发滚动,请到浏览器或预览到手机查看。
2 API
参数
- rollList: 标签列表数据。
- animationSpeed: Number, 默认值为 7,滚动速度(越小越快)
- rollList: Array, 必填,标签数据列表,每个对象至少包含 text(文本)、color(颜色)、可选的 backgroundColor(背景色)和 size(字体大小)属性。
- bcAlpha: Number, 可选,默认值为 0.2,当标签没有指定背景色时,自动应用的背景透明度。
事件
- clickOn: 点击标签事件
3 列表数据结构
tagsList: [
{ text: '标签A', color: '#ff5722', size: 24 },
{ text: '标签B', color: '#2196f3', backgroundColor: '#ddd', size: 20 },
{ text: '标签C', color: '#4caf50', size: 18 },
{ text: '标签D', color: '#e91e63', backgroundColor: '#f5f5f5', size: 22 },
{ text: '标签E', color: '#9c27b0', backgroundColor: '#fce4ec', size: 26 },
{ text: '标签F', color: '#795548', size: 18 },
// 请确保标签的总宽度大于父元素宽度,以确保滚动效果...
]