微信小程序修改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}}的值
相关推荐
wqq_9922502773 小时前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域20 小时前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN20 小时前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
guanpinkeji20 小时前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
paterWang20 小时前
小程序-基于java+SpringBoot+Vue的小区服务管理系统设计与实现
java·spring boot·小程序
尘浮生21 小时前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入21 小时前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪
tundra381 天前
DTH11传感器温度湿度+esp8266+阿里云+小程序
阿里云·小程序·云计算
虞书欣的61 天前
Python小游戏28——水果忍者
开发语言·人工智能·游戏·小程序·pycharm
坠入暮云间x1 天前
Nodejs开发仿马蜂窝旅游小程序API接口,服务器端开发,商家后台 Vue3+微信小程序+koa+mongodb+node.js
微信小程序·小程序·旅游