更新记录

1.0.0(2024-05-28) 下载此版本

1、实现了可以滚动的标签云功能。 2、可以点击标签触发事件。 3、添加了动态计算标签云总宽度的功能。 4、标签云支持对应样式属性(字体大小、颜色、背景色)的设置、速度设置。


平台兼容性

Vue2 Vue3
×
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 }, // 请确保标签的总宽度大于父元素宽度,以确保滚动效果... ]

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问