【uniapp】样式合集

1、修改uni-data-checkbox多选框的样式为单选框的样式

我原先是用的单选,但是单选并不支持选中后,再次点击取消选中;所以我改成了多选,然后改变多选样式,让他看起来像单选

在所在使用的页面上修改样式即可

html 复制代码
<uni-data-checkbox multiple selectedColor='#2979ff' selectedTextColor="#000" v-model="agree"
					:localdata="agreedata">
					<label>
						<checkbox />
						<view>我已阅读并同意
							<text class="col-g" @click="handleXI">《用户协议》</text>
							<text class="col-g" @click="handleYX">《隐私协议》</text>
						</view>
					</label>
				</uni-data-checkbox>
html 复制代码
<style lang="scss">
   //修改多选框的样式为单选样式
			.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner .checkbox__inner-icon {
				opacity: 1;
				background-color: #2979ff !important;
			}

			.uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
				width: 8px !important;
				height: 8px !important;
				border-radius: 10px !important;

				top: 3px !important;
				left: 3px !important;
				height: 8px;
				width: 4px;
				border: 0px solid #2979ff !important;
			}

			.uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
				border-radius: 8px !important;
				display: flex;
				flex-shrink: 0;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				position: relative;
				width: 16px;
				height: 16px;
				border: 1px solid #DCDFE6;
				border-radius: 16px;
				background-color: #fff !important;
				z-index: 1;
			}
</style>

2、修改checkbox的样式

html 复制代码
<checkbox-group>
					<label style="display: flex;">
						<checkbox value="agree" class="checkbox" />
						<view>我已阅读并同意
							<text class="col-g" @click="handleYH">《用户协议》</text>及
							<text class="col-g" @click="handleYS">《隐私协议》</text>
						</view>
					</label>
				</checkbox-group>

样式必须得写在app.vue中

html 复制代码
.login_container {
		//自定义checkbox的样式( 元素使用的时候就是使用类名:checkbox )
		checkbox.checkbox .wx-checkbox-input,
		checkbox.checkbox .uni-checkbox-input {
			border-radius: 8px !important;
			display: flex;
			flex-shrink: 0;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 16px;
			height: 16px;
			border: 1px solid #DCDFE6;
			border-radius: 16px;
			background-color: #fff !important;
			z-index: 1;
		}

		// 选中后的 对勾样式 
		checkbox.checkbox .uni-checkbox-input-checked::before,
		checkbox.checkbox .wx-checkbox-input-checked::before {
			width: 8px;
			height: 8px;
			border-radius: 10px !important;
			line-height: 20px;
			text-align: center;
			font-size: 18px;
			color: #fff;
			background: #2979ff;
			transform: translate(-70%, -50%) scale(1);
			-webkit-transform: translate(-70%, -50%) scale(1);
			position: absolute;
			top: 7px !important;
			left: 9px !important;
			border: 0px solid #2979ff !important;
		}
	}

3、uni-row的gutter无效

gutter的单位不是px是rpx,所以在设置的时候,要设置大一些

相关推荐
2501_915909062 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
fruge3 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
2501_915918414 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
znhy@1235 小时前
CSS易忘属性
前端·css
软件技术NINI6 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
游戏开发爱好者86 小时前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
BumBle7 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
2501_915921437 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
小肚肚肚肚肚哦7 小时前
CSS 伪类函数 :where 简介
前端·css
小肚肚肚肚肚哦8 小时前
伪元素与普通元素的层级关系问题浅析
前端·css