素材编辑 | 宋大狮
排版运营 | 小唐狮
ONE 问题描述
今天要和大家分享的是关于uni的问题，如何修改uniapp中默认单选按钮的样式。
需求： uniapp中默认的单选按钮选中后变为实心，中间显示对钩图标。但我们在做项目的时候，下面这种单选按钮的样式也是比较常见的。
TWO 代码实现
HTML部分：
<label class="radio">
<radio value="" :checked="isAgree" @click="isAgree = !isAgree" />
<text>
我已阅读并同意
<text class="blue">《服务协议》</text>
&
<text class="blue">《证照信息》</text>
</text>
</label>
JS部分：
<script>
export default {
data() {
return {
// 是否同意协议
isAgree: false,
};
},
methods: {
}
};
</script>
CSS部分：
// 单选按钮样式
.uni-radio-wrapper .uni-radio-input {
background-color: transparent;
border: 4rpx solid rgb(0, 122, 255);
width: 26rpx;
height: 26rpx;
}
// 隐藏对号
uni-radio::before {
display: none;
}
.uni-radio-wrapper .uni-radio-input.uni-radio-input-checked {
background-color: rgba($color: #000000, $alpha: 0) !important;
border: 4rpx solid rgb(170, 170, 0);
position: relative;
&::before {
display: inline-block;
content: '';
width: 90%;
height: 90%;
position: absolute;
left: 50%;
top: 48%;
transform: translate(-50%, -50%);
background-color: rgb(0, 122, 255);
border: none;
border-radius: 50%;
}
}
THREE 问题总结
总结一：flex布局常用属性
display:flex; //将对象作为弹性伸缩盒子显示
flex-direction:row; //自左水平排列
flex-direction:column; //垂直方向排列
flex-wrap:nowrap; //项目不换行
flex-wrap:wrap; //换行 第一行在上方
flex-wrap:reverse; //换行 第一行在下方
justify-content:flex-start; //左对齐
justify-content:flex-end; //右对齐
justify-content:center; //居中对齐
justify-content:space-between; //两端对齐，盒子之间间隔相等
justify-content:space-around; //每个盒子两侧间隔相等
总结二：常用样式
border-radius:8px; //圆角半径
text-indent:20px; // 首行缩进
letter-spacing:1px; //字间距
vertical-align:middle; //图片垂直居中
z-index:99; //提高元素层级
:active //元素被点击添加样式，样式在点击后消失
:focus //元素被点击添加样式，样式在点击后不消失
FOUR 集思广益
欢迎大家对本问题留言或私信指教，一起学习提高！
- END -
ABOUT 关于作者
- 宋大狮 | 轻轻松松工作，简简单单生活
- 小唐狮 | 广场舞大军中最靓的仔
