复选框自定义样式&data数据与style交互
最后有全部代码，各位友友不要划走。
手写复选框和点击出现下拉框效果
上图就是效果图，这里面的点击修改颜色和背景颜色的样式就是用style调用js的data数组中的属性来实现的。
编译器:hbuilder,运行器:微信开发者工具
页面主要用到@tap点击事件和v-show来进行显示和隐藏,关于调用数组中的属性,首先创建来一个点击事件,跳转后使用if-else判断数组中背景颜色bgcolor和color这两个属性是否为空,为空则赋值,不为空则赋空值,
然后我用到的是利用v-for出现的index序号来进行确认要复选的内容,在js当中用
this.test[e].scolor和this.test[e].bgcolor来实现回调和显示,关于调用js数组中属性的语法是this.数组名[下标].属性名,
如何利用style调用js数组当中数据,我用的是在view中写行内样式:style=“[{‘color’:item.scolor,‘background-color’:item.bgcolor}]”,
它的语法结构是:style=[{‘style属性名’:js数据名,‘style属性名’:js数据名}]
最后上源码,如有需要可自行搬运
<template> <view> <view> <button type="primary" @tap="btn">点击显示下拉框</button> </view> <view class="xia" v-show="flag"> <view class="xia_1"> <a type="primary" class="xia_left xia_all" @click="btn">取消</a> <a type="primary" class="xia_right xia_all" @click="btn">确认</a> </view> <view> <!-- 复选功能实现 --> <view v-for="(item,index) in test" :key="item.name" style="text-align: center;"> <view class="cclass" @tap="fuxuan(index)" :style="[{'color':item.scolor,'background-color':item.bgcolor}]"> <!-- :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"> --> {{item.name}} </view> </view> </view> </view> </view> </template> <script> export default { data() { return { flag: false, test: [{ name: "王五", scolor: '', bgcolor: '' }, { name: "张三", scolor: '', bgcolor: '', }, { name: "李四", scolor: '', bgcolor: '', }, { name: "小黑子", scolor: '', bgcolor: '', }, ] } }, methods: { btn() { this.flag = !this.flag }, fuxuan(e) { // 找到数组属性用到了v-for中的index找下标，并且用this.数组名[index].属性名来调用 // 这里用到了if-else判断颜色scolor和bgcolor是否为空字符串，如果为空代表没选中 if (this.test[e].scolor == '') { this.test[e].scolor = 'red', this.test[e].bgcolor = 'lightblue' } else { this.test[e].scolor = '' this.test[e].bgcolor = '' } } } } </script> <style> .xia { /* 弹性布局 */ position: absolute; /* 颜色布置 */ background-color: #e2e2e2; /* 底部设置 */ bottom: 0px; /* 宽度设置100% */ width: 100%; /* 边框设置 */ border: 1px solid white; } .xia_1 { /* 设置确认取消的宽高背景颜色等等 */ width: 100%; /* 设置高背景颜色 */ height: 75rpx; background-color: aliceblue; /* 设置文本水平居中 */ justify-content: center; } .cclass { /* 垂直居中 */ line-height: 100rpx; /* 字体大小 */ font-size: 30rpx; } .xia_1 { /* 设置宽高背景颜色，块内文本居中对齐 */ width: 100%; height: 75rpx; background-color: aliceblue; justify-content: center; } .xia_all { /* 取消默认块 */ display: inline; /* 设置行高（居中）） */ line-height: 75rpx; } .xia_left { /* 左浮动 */ float: left; /* 文本颜色与左外边距 */ color: blue; margin-left: 20rpx; } .xia_right { /* 右浮动，文本颜色和右外边距 */ float: right; color: green; margin-right: 20rpx; } </style>
