微信小程序之自定义单选框radio和复选框和checkbox的样式

最新推荐文章于 2024-10-23 10:51:38 发布

置顶

刺鸟_前端

最新推荐文章于 2024-10-23 10:51:38 发布

阅读量2.4w

点赞数 6

文章标签：微信小程序微信小程序radio和checkbox 微信小程序单选框和复选框

本文链接：https://blog.csdn.net/Hug_rj/article/details/82017393

版权

刚开始小程序出来那会研究过自定义radio和checkbox的样式，在后来的升级中，原先写的样式出现了一些问题，

例如：

1、未选中和选中时按钮大小不一，导致view盒子高度变化，出现晃动；

2、选中后出现按钮还有原始的默认背景（绿色）；

这是升级后的，主要还是觉得自定义样式能使我们在小程序的开发中减少图片的加载以及内存；同时后期的维护也更加便利；

更改radio的样式，效果如下图：

wxml:

<view class='item ft-30 h90 flex flex-vc bd-bt-f4f pd-lt20 pd-rt20'>
     <label class='item-left color-333 mg-rt10' for='sex'>性别：</label>
     <radio-group class="item-right radio-group" bindchange="changeSex">
          <label class="radio" wx:for="{
  {items}}">
               <radio value="{
  {item.name}}