微信小程序自定义单选框（radio）默认样式

话不多说，直接上码，复制粘贴直接上手

html

<view class="radio-box" wx:for="{{radios}}"  key="item.id">
    <lebel class="radio {{ index==sex ? 'on' : ''}}" data-index='{{index}}' data-value='{{item.value}}' bindtap="check">
    <image wx:if='{{index==sex}}' src='../../images/arrow.png'></image>
    </lebel>{{item.label}}
</view>

js

Page({

  data: {
     sex: 0,
    radios: [
      {
        label: '男',
        value: '男',
      },
      {
        label: '女',
        value: '女',
      },
    ]
  },
  check(e) {
    console.log(e)
    var that = this;
    var sex = e.currentTarget.dataset.index
    that.setData({
     sex:sex
    })
  },

})

css

.radio-box{
  display: inline-block;
  position: relative;
  height: 15px;
  line-height: 15px;
  margin-right: 5px;
  font-size: 26rpx;
}
.input-radio {
  display: inline-block;
  position: absolute;
  opacity: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  left: 0px;
  outline: none;
  -webkit-appearance: none;
}
.radio {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  background: #D7D7D9;
  
}
.on{
    background: wheat
}
lebel image{
    width: 15px;
    height: 15px;
}

有帮助到大家的关注我

会一直更新小程序常用技术及新玩法。

 

喜欢上方小程序,需要源码的,添加博主微信私信小编.