uniapp复选框自定义样式&data数据与style交互

复选框自定义样式&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>