radiox修改按钮大小 微信_微信小程序radio-group控件的使用和自定义

我们先看下效果图

微信小程序radio-group控件的自定义

官方的接口不能自定义radio-group按钮图片，如果我们想自己定义一个radio-group按钮的选择状态的布局。我们需要自己实现。

因为微信小程序是数据驱动界面的，所以我们换一种思路，自己用image控件，来显示这个单选按钮

我们先来看看页面布局：

{{item.text}}

1

2

3

4

5

6

7

8

9

10

{{item.text}}

核心代码

1

我们通过用户点击按钮了之后，修改ischeck的状态，然后根据ischeck状态值来控制单选图片。

再来看看微信小程序radio-group控件的使用

微信小程序组件：官方文档

优化代码实例

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)

}

})

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代码

{{item.value}}

1

2

3

4

5

{{item.value}}

界面显示

.radio{

display: block;

margin-top: 10px;

margin-left: 10px;

}

1

2

3

4

5

.radio{

display:block;

margin-top:10px;

margin-left:10px;

}

使用属性display: block; 可以让让radio每一行显示一个选项