微信小程序> 微信小程序radio单选按钮选中与取消状态切换

微信小程序radio单选按钮选中与取消状态切换

浏览量:10330 时间: 来源:ヾ喵了live
label catchtap='checkedTap'      radio checked="{{checked}}" style="color:#969696;font-size:28rpx;"设为默认地址/radio/label
/* 自定义 radio 样式 */radio .wx-radio-input{    border-radius: 50%;     width: 28rpx;    height: 28rpx;} /* 选中后的样式 (可根据设计稿需求自己修改) */radio .wx-radio-input.wx-radio-input-checked::before{    border-radius: 50%;    width: 44rpx;     height: 44rpx;     line-height: 44rpx;    text-align: center;    font-size: 28rpx; /* 对勾大小 26rpx */    color:#fff; /* 对勾颜色 */    background: #2facff;    border-color: #2facff;}
//是否选中  checkedTap: function () {    var checked = this.data.checked;    this.setData({      "checked": !checked    })  }

分析:

1.在wxml的radio中,有一个选中状态的赋值,checked="{{checked}}" , 给label绑定点击事件—checkedTap。

2.接着在data中,声明checked为false。

3.然后在函数中,获取到当前的checked的状态值,之后再通过this.setData改变状态。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎