首页 > 微信 > 详细

小程序 中 自定义单选框样式

时间:2019-02-14 14:44:19      阅读:643      评论:0      收藏:0      [点我收藏+]
<radio-group  name="country" class="radio-group" bindchange="radioChange">
      <label class="radio" wx:for="{{items}}"  wx:key="{{index}}">
        <radio value=‘{{item.value}}‘ checked=‘{{item.checked}}‘></radio>
        <!-- <radio value="{{item.name}}" checked="{{item.checked}}" /> -->
        <block wx:if="{{yjIndex == item.value}}">
          <image src=‘../img/diananniu_yidian.png‘></image>
        </block>
        <block wx:else>
          <image src=‘../img/diananniu_weidian.png‘></image>
        </block>
        {{item.name}}
      </label>
  </radio-group>
data数据
items:[
      { name: ‘是‘, value: 1 },
      { name: ‘否‘, value: 0 ,checked:true}
    ],
yjIndex:0,

单选点击事件

radioChange:function (event) {
    this.setData({
      yjIndex: event.detail.value
    })
  },

 CSS样式

.radio{
  position:relative;
}
.radio radio{
  opacity: 0;
}
.radio image{
  position:absolute;
  top:0;
  left:0;
  width:44rpx;
  height:44rpx;
}

  

小程序 中 自定义单选框样式

原文:https://www.cnblogs.com/dyy-dida/p/10374329.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!