微信小程序、uniapp、vue生成随机边框颜色十六进制

效果图

实现思路（只代表我项目需求，自己需求自行做更改）。
刚打开页面需要设置这个颜色，所以需要在onShow里面调用这个方法，自己写一个rgb颜色得数组，然后往这个你需要的数组里的每一项里动态添加一个枚举值。从列表中随便取一个颜色赋值。
主要用到的方法

Math.floor(Math.random() * colorArr.length)

<ul><li v-for="item in getPetImagesData" :key="item.id" :style="{border: `1px solid ${item.color}`}">{{ item.imageName }}</li>
</ul>

 onShow() {this.getPetImages();},
// 这里用到了async  await 让code同步执行
async getPetImages() {let colorArr = ["#7FFFAA", "#ff7070", "#EEC900", "#4876FF", "#ff6100", "#FFA500","#7DC67D", "#E17572", "#7898AA", "#C35CFF", "#33BCBA", "#C28F5C","#FF8533", "#6E6E6E", "#428BCA", "#5cb85c", "#FF674F", "#E9967A","#66CDAA", "#00CED1", "#9F79EE", "#CD3333", "#FFC125", "#32CD32","#00BFFF", "#68A2D5", "#FF69B4", "#DB7093", "#CD3278", "#607B8B"];const res = await this.$h.pos('petIm'); //  自己的接口我这是随便写的
// 最后执行赋值操作（随便写一个数组）这是没给的，也就是没赋值
/**
* 没给color枚举值的数组（假数据）
let getPetImagesData = [{id: 1,imagesname: 'hello world'}
]
*/// 一定要先给然后在赋值，赋值过后你的数组里的每一项都会有一个color的随机颜色res.data.forEach(item => {item.color = colorArr[Math.floor(Math.random() * colorArr.length)]});this.getPetImagesData = res.data;/***这是赋值过后的let getPetImagesData = [{id: 1,imagesname: 'hello world',color: '#131232'}]*/
},

ul {display: flex;flex-wrap: wrap;align-items: center;justify-content: flex-start;text-align: center;li {border-radius: 20rpx;margin-right: 20rpx;padding: 10rpx;font-size: 20rpx;margin-bottom: 20rpx;}

微信小程序、uniapp、vue生成随机边框颜色十六进制相关推荐

视频教程-uniapp开发仿阿里飞猪旅游微信小程序，vue中高级课程-Vue
uniapp开发仿阿里飞猪旅游微信小程序,vue中高级课程五年互联网实战开发经验,全栈工程师,熟悉主流前端开发技术,js,vue等,后端技术方向在python,node,曾先后就职于阿里云,阿里影业 ...
微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目
微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目官方地址:https://uniapp.dcloud.io/ 1.起步 1.1.简介 uni-app 是一个使用 Vu ...
开发微信小程序(uniapp)
@2021SC@SDUSC WebStorm开发微信小程序(uniapp) 创建项目采用cli方式创建的项目 vue create -p dcloudio/uni-preset-vue my-pro ...
微信小程序使用weapp-qrcode生成二维码
<canvas style="width:108rpx;height:108rpx; canvas-id='qrcode'></canvas> // weapp-qr ...
微信小程序业务-字符串生成二维码（weapp-qrcode）
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言邂逅weapp-qrcode 基本使用详细参数小程序组件中使用 image属性详解想使用网络图片? 参考地址前言在小程序项 ...
微信小程序uni-app
文章目录一.微信小程序uni-app 二.下载微信开发者工具三.小程序开发一.微信小程序uni-app 小程序是一种不需要下载.安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一 ...
php验证码zhuc_微信小程序实例：实现随机验证码（附代码）
本篇文章给大家带来的内容是关于微信小程序实例:实现随机验证码(附代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 小程序上经常会有一些注册申请页面需要用到随机验证码.具体实现 ...
微信小程序：检讨书生成微信小程序源码
对于经常写检讨的小伙伴来说,福音来了因为这是一款检讨书生成小程序所以再也不用为了写检讨而烦恼了哦支持自定义字数下线,主题自定义支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结【文末附源码】
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 文章目录微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 1️⃣ 写在前面 2️⃣ 蓝牙连接流程 3 ...

微信小程序、uniapp、vue生成随机边框颜色十六进制

微信小程序、uniapp、vue生成随机边框颜色十六进制相关推荐

最新文章

热门文章