微信小程序修改radio的样式

复制代码
        <radio-group bindchange="radioChange">
          <label class="flRlist" wx:for="{{productList}}" wx:key="index">           
            <view class="flName">{{item.name}}</view>
            <view class="flZT">
              <radio color="#74bfe7" style="transform:scale(0.8);" value="{{item.value}}" checked="true"  class="flxzys"/>
            </view>
          </label>
        </radio-group>

radio .wx-radio-input{width:35rpx;height:35rpx;border-radius:50%;border:2rpx solid #000;background:0 0}
radio .wx-radio-input.wx-radio-input-checked{width:35rpx;height:35rpx;border:2rpx solid #000;background-color:#fff!important}
radio .wx-radio-input.wx-radio-input-checked::before{width:35rpx;height:35rpx;border-radius:50%;width:20rpx;height:20rpx;line-height:20rpx;text-align:center;font-size:0rpx;color:transparent;background:#000;transform:translate(-50%,-50%) scale(1)}

  data: {
    productList: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'},
    ]
  },

二:

复制代码
<view class="flZT">
              <radio color="#74bfe7" style="transform:scale(0.8);" value="{{item.value}}" checked="true"  class="flxzys"/>
            </view>

注解:

bindchange:有变化执行事件

wx:for-items:表示对{{items}}进行循环

<radio>中的color属性:主要设置选中之后图标颜色

<radio>中的style属性:这里主要用来展示图标的大,scale缩放

<radio>中的value属性:主要用于事件bindchange执行之后能获取到值

<radio>中的checked属性:设置默认值

复制代码
  //单选
  radioChange:function(e){
    //获取单选数据
    console.log(e.detail.value)//输出的是{{item.name}}的值
相关推荐
mg66836 分钟前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
【ql君】qlexcel38 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
程序员陆通44 分钟前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
nbsaas-boot2 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟2 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45802 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游2 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
说私域2 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的抖音渠道力拓展与多渠道利润增长研究
人工智能·小程序·开源
MonkeyKing_sunyuhua3 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序