uniapp插件实现无限滚动的标签云

m0_58213953

已于 2024-06-03 17:33:26 修改

阅读量811

点赞数 11

文章标签： uni-app 小程序微信小程序

于 2024-06-03 17:32:07 首次发布

本文链接：https://blog.csdn.net/m0_58213953/article/details/139420572

版权

tagCloud 是一款基于 Vue.js 开发的动态滚动标签组件，旨在为用户提供平滑滚动的标签展示效果，常用于导航、热门标签等场景。该组件不仅能够展示实际数据，还能通过复制数据实现循环滚动的视觉效果，增强页面动感。

该插件目前只确认兼容H5和微信小程序其他不确定，并且在HBuilderX或者微信开发者工具中运行默认无法触发滚动，请到浏览器或预览到手机查看。

参数

参数
rollList	Array, 标签列表数据
animationSpeed	Number, 默认值为 7，滚动速度(越小越快)
rollList	标签数据列表，每个对象至少包含 text（文本）、color（颜色）、可选的 backgroundColor（背景色）和 size（字体大小）属性

事件
clickOn	点击事件

// 列表数据结构体
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 },
    // 请确保标签的总宽度大于父元素宽度，以确保滚动效果...
]