uniapp-前后端开发app-系列外传01小组件工具篇

checkgroup做圆形单选框

因为有很多东西要整理,所以先出这种模块组件篇,偏实用

test.vue

<template>
	<view class="content">
		<view class="testyan">

			<view class="flowouter">

				<checkbox-group class="flowoutergroup">

					<view class="flowouterspace" v-for="(items,index) in testList" :key="index"
						@tap="choseChange(index)">

						<view class="checktext">{{items.name}}</view>
						<checkbox class="rightChickstyle" :value="items.values" :checked="items.checked"></checkbox>
					</view>

				</checkbox-group>

			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				testList: [{
						name: "第一天",
						values: "第一天",
						checked: false,
					},
					{
						name: "第七天",
						values: "第七天",
						checked: false,
					},
					{
						name: "第八天",
						values: "第八天",
						checked: false,

					},
					{
						name: "第十天",
						values: "第十天",
						checked: false,
					}
				],
			}
		},
		onLoad() {

		},
		methods: {

			choseChange(index) {
				this.testList.forEach(v => v.checked = false)
				this.testList[index].checked = true

			}
		}
	}
</script>

<style lang="less" lang="scss">
	.content {
		position: relative;
		padding: 20rpx;
		width: 100vw;

		.testyan {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			background: #dddddd;
			border-radius: 20rpx;

			.flowouter {
				margin-top: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.flowoutergroup {
					width: 100%;
					display: flex;
					flex-direction: column;

					.flowouterspace {
						height: 100rpx;
						background: #FFFFFF;
						opacity: 0.6;
						padding-left: 22rpx;
						padding-top: 22rpx;
						padding-bottom: 22rpx;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 15rpx;
						color: black;

						.rightChickstyle {
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
</style>

App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
  /* 在这里修改checkbox样式*/
	page,view,text,swiper,swiper-item,image,navigator{
	   padding :0;
	   margin :0;
	   box-sizing:border-box;
	}
	.uni-checkbox-input{
			background-color: #ffffff !important;   //背景
			/* border-color: #ffffff !important;   //边框 */
			/* 如果打开边框就会是透明的*/
			color: #C3B7A3 !important;   //对勾颜色
		}
	uni-checkbox .uni-checkbox-input {
			border-radius: 80rpx !important;
      /* 这里是方形选择框变圆形*/
		}	

</style>

成型图片

在这里插入图片描述