微信小程序，标签云效果：自定义颜色，并随机显示不同颜色

嗯嗯，先来个效果图looklook…

wxml代码结构

<view class='content'><block wx:for="{{labArr}}" wx:key="key" wx:for-index="key" wx:for-item="v"><view class='lab' data-key="{{key}}" style="background-color:{{randomColorArr[key]}}">{{v}}</view></block>
</view>

wxss代码结构

.content{ width: 100%; height: auto; overflow: hidden; margin: 50rpx auto;}
.lab{ padding: 4rpx 10rpx; margin: 20rpx; border-radius: 4rpx; float: left; color: #fff; font-size: 28rpx;}

js代码结构

// pages/randomColor/randomColor.js
Page({/*** 页面的初始数据*/data: {//标签云labArr: ['曾小贤', '胡一菲', '吕子乔', '陈美嘉', '唐悠悠','关谷神奇','张益达','诺澜','雨墨','陆展博'],// 自定义自己喜欢的颜色colorArr: ["#EE2C2C", "#ff7070", "#EEC900", "#4876FF", "#ff6100","#7DC67D", "#E17572", "#7898AA", "#C35CFF", "#33BCBA", "#C28F5C","#FF8533", "#6E6E6E", "#428BCA", "#5cb85c", "#FF674F", "#E9967A","#66CDAA", "#00CED1", "#9F79EE", "#CD3333", "#FFC125", "#32CD32","#00BFFF", "#68A2D5", "#FF69B4", "#DB7093", "#CD3278", "#607B8B"],// 存储随机颜色randomColorArr: []},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that = this,labLen = that.data.labArr.length,colorArr = that.data.colorArr,colorLen = colorArr.length,randomColorArr = [];//判断执行do{let random = colorArr[Math.floor(Math.random() * colorLen)];randomColorArr.push(random);labLen--;} while (labLen > 0)that.setData({ randomColorArr: randomColorArr});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

源码会持续更新到公众号，需要可以关注一下哦…

微信小程序，标签云效果：自定义颜色，并随机显示不同颜色相关推荐

c语言京东购物系统,仿京东商城: 自主使用微信小程序实现的网上商城案例（包括前端和后台），利用了微信小程序的云数据库...
仿京东网上商城介绍自主使用微信小程序实现的仿京东网上商城案例(包括前端和后台),数据库利用了微信小程序的云数据库软件架构软件架构说明数据库表设计本系统数据库主要用了微信小程序自带的云数据库 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
微信小程序运用云函数调用新闻类API
微信小程序运用云函数调用新闻类API 微信小程序运用云函数调用新闻类API 新闻列表的编写云函数的编写 JS方法 wxml页面编写 wxss样式最终效果截图微信小程序运用云函数调用新闻类API ...
微信小程序+阿里云+stm32f407的一个项目
** 微信小程序+阿里云+stm32f407的一个项目## 小程序参考了大神半颗心脏的博客和资料, 小程序多个页面推送数据因为自己做小程序是类似商城的一个demo, 其中数据需要与单片机进行交互,而 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
文章目录前言一.功能说明二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决小结专题文章链接前言本篇文章,将对照专题案 ...
微信小程序用云开发实现多人聊天2020/05/21
微信小程序用云开发实现多人聊天室微信小程序用云开发实现多人聊天2020/05/21 效果图片 js wxml wxss 微信小程序用云开发实现多人聊天2020/05/21 用微信云开发实现聊天室无 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能
文章目录前言一.功能说明二.代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 专题文章链接前言案例的运行效果,可以扫码观看: 本篇文章,我们将实现应用的用户反馈功能. 一 ...
微信小程序阿里云服务器非物联网平台自建MQTT代理服务器控制树莓派LED
微信小程序阿里云服务器非物联网平台自建MQTT代理服务器控制树莓派LED 本人大三,临近毕业季,日后希望从事物联网和嵌入式相关工作,所以自己构想了一个项目来练手,之前做大创的时候学了一点微信小程序 ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...

微信小程序，标签云效果：自定义颜色，并随机显示不同颜色

嗯嗯，先来个效果图looklook…

微信小程序，标签云效果：自定义颜色，并随机显示不同颜色相关推荐

最新文章

热门文章