微信小程序,购物车功能开发,radio组件样式自定义
发表人:金马 | 2022-04-16

微信小程序开发时对于radio组件的样式经验,直奔主题:

radio组件样式

微信小程序radio组件改颜色的实现,微信自带的样式是绿色的,如下图:

image.png

改颜色是不能直接用外部wxss去指定的,如下代码是不能实现的

wxml:

<radio value="0" class="radiocolor" />

wxss:

.radiocolor{

color:#d81e06

}

如以上代码是没有效果的,这个按CSS设计原理应该是可以的,不知以后微信是否会修改,我们要改颜色只能写在wxml里,如下代码:

<radio value="0 color="#d81e06" />

当然有些也喜欢改成这样的效果,圈子里是点而不是勾:

image.png

且看实现代码,wxml无需改动

wxml代码:

<radio value="r1" checked="true"/>选中

wxss代码:

/* 单选按钮样式*/

radio .wx-radio-input {

  width: 40rpx;

  height: 40rpx;

  border: 4rpx solid #8C8C8C;/* 外圈边框,默认灰色,即未选中状态*/

  border-radius: 50%;

  background: none;

}

/*单选按钮选中后内部样式*/

radio .wx-radio-input.wx-radio-input-checked {

  border: 4rpx solid #00A0E9 !important;/* 外圈边框,选中状态颜色*/

  background-color: white !important;/* 外圈边框与内圈实心圆间的内容的颜色,不设置就默认是上面的绿色*/

}

/*单选按钮选中后内部中心*/

radio .wx-radio-input.wx-radio-input-checked::before {

  width: 60%;

  height: 60%;

  background: #00A0E9;/* 内圈实心圆选中状态颜色*/

  border-radius: 50%;

  content: '';/* 隐藏✔️*/

  transform: translate(-50%, -50%) scale(1);

  -webkit-transform: translate(-50%, -50%) scale(1);

}

通过以上两个实例代码,举一反三,对于微信小程序的radio组件样式基本可通用。

我来说两句(0)
:zui: :wink: :twisted: :roll: :oops: :mrgreen: :love: :lol: :jidong: :idea: :han:
发表评论(Ctrl+Enter)
—— 金马科技公众号 ——
十二年 行业积累

砥砺前行路上,有您关注,相聚相研共话成长!

如有意向,请与我们联系

办公电话:0774-3838278 / QQ:154727262 / 微信:wztmma