微信小程序radio 标签 使用

版权声明:岁月推动着年华,伴随着流水的脚步走过春夏秋冬.本文重在共享,欢迎大家转载,评论,指教,谢谢!!!!!! https://blog.csdn.net/qq_33210042/article/details/90903750

记录radio 标签,主要是之前有一个项目 ui设计 选中的在后面刚开始以为需要自定义之类的

后台自己随便弄了下,感觉只需要把文字放在前后即可

 

radio 标签

 

代码

wxml 

<view>
<radio-group class="radio-group" bindchange="radioChange">
   <label class="radio"  wx:for="{{items}}" wx:key="index">
    <radio value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</radio>
  </label>
</radio-group>
</view>

js

/**
    * 页面的初始数据
    */
   data: {
     items:[
       { name: 'USA', value: '美国' },
       { name: 'CHN', value: '中国', checked: 'true' },
       { name: 'BRA', value: '巴西' },
       { name: 'JPN', value: '日本' },
       { name: 'ENG', value: '英国' },
       { name: 'FRA', value: '法国' }
     ],
 

   },

效果图

现在要实现 效果如下

 

只需要改变位置位置即可.如下

<view>
<radio-group class="radio-group" bindchange="radioChange">
   <label class="radio"  wx:for="{{items}}" wx:key="index">
   {{item.value}}
    <radio value="{{item.name}}" checked="{{item.checked}}"></radio>
  </label>
</radio-group>
</view>

 

展开阅读全文

没有更多推荐了,返回首页