Python在线学习我们先看下效果图
微信小程序radio-group控件的自定义
官方的接口不能自定义radio-group按钮图片，如果我们想自己定义一个radio-group按钮的选择状态的布局。我们需要自己实现。
因为微信小程序是数据驱动界面的，所以我们换一种思路，自己用image控件，来显示这个单选按钮
我们先来看看页面布局：
|
1 2 3 4 5 6 7 8 9 10 |
<view class="question"> <image class="userinfo-avatar question_avatar" src="../../img/admin.png" background-size="cover"></image> <image class="sanjiao_left" src="../../img/sanjiao_left.png" background-size="cover"></image> <view class="question_select"> <view class="radio" wx:for="{{question_current.options}}"> <image bindtap="radioTap" id="{{item.sn}}" class="radio_select" src="{{item.ischeck?'../../img/ic_yuanyellow.png':'../../img/ic_yuanwhite.png'}}"></image> <text class="radio_title">{{item.text}}</text> </view> </view> </view> |
核心代码
|
1 |
<image bindtap="radioTap" class="radio_select" src="{{item.ischeck?'../../img/ic_yuanyellow.png':'../../img/ic_yuanwhite.png'}}"></image> |
我们通过用户点击按钮了之后，修改ischeck的状态，然后根据ischeck状态值来控制单选图片。
再来看看微信小程序radio-group控件的使用
微信小程序组件： 官方文档
优化代码实例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, radioChange: function(e) { console.log('radio发生change事件，携带value值为：', e.detail.value) } }) |
JS代码
|
1 2 3 4 5 |
<radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> |
界面显示
|
1 2 3 4 5 |
.radio{ display: block; margin-top: 10px; margin-left: 10px; } |
使用属性display: block; 可以让让radio每一行显示一个选项
未经允许不得转载：Python在线学习 » 微信小程序radio-group控件的使用和自定义