小程序RadioButton效果实现（附源码）

主要实现了小程序中的radiobutton效果，例如选择充值金额的时候会有几个选项，点击其中一项的时候会改变选中按钮样式。

以下是效果图（文末附源码链接）

实现思路

1.设置按钮两种样式

2.选择样式改变条件

3.我是为每一个按钮添加id根据id来设置按钮样式，

wxml主要代码

 

<view class='moneybtn'>

<view class='btnone'>

<button class="{{isChecked==1?'btnitemelse':'btnitem'}}" bindtap='btnoneclick' id='1'>{{one}}</button>

<button class="{{isChecked==2?'btnitemelse':'btnitem'}}" bindtap='btnoneclick' id='2'>{{two}}</button>

<button class="{{isChecked==3?'btnitemelse':'btnitem'}}" bindtap='btnoneclick' id='3'>{{three}}</button>

</view>

 

<view class='btntwo'>

<button class="{{isChecked==4?'btnitemelse':'btnitem'}}" bindtap='btntwoclick' id='4'>{{four}}</button>

<button class="{{isChecked==5?'btnitemelse':'btnitem'}}" bindtap='btntwoclick' id='5'>{{five}}</button>

<button class='btnitem' bindtap='btntwoclick' id='6'>{{six}}</button>

</view>

wxss主要代码

.moneybtn {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

 

.btnone {

margin-top: 10rpx;

display: flex;

flex-direction: row;

justify-content: space-between;

}

 

.btntwo {

margin-top: 10rpx;

display: flex;

flex-direction: row;

justify-content: space-evenly;

}

 

.btnitem {

margin: 5rpx;

font-size: 30rpx;

width: 200rpx;

display: flex;

flex-direction: row;

justify-content: center;

}

 

.btnitemelse{

color: orange;

margin: 5rpx;

font-size: 30rpx;

width: 200rpx;

}

js主要代码

data: {

one: '100元',

two: '200元',

three: '500元',

four: '1000元',

five: '2000元',

six: '其他金额',

apaymoney: 100,

getmoney: 1,

allmoney: 101,

inputValue: null,

isChecked: "1",

},

 

btnoneclick: function (event) {

var tid = event.target.id;

switch (tid) {

case "1":

var money = 100;

var getm = 1;

this.setData({

apaymoney: money,

allmoney: money + getm,

isChecked: "1",

})

break;

case "2":

console.log(event)

var m = 200;

var getm = this.data.getmoney;

this.setData({

apaymoney: m,

allmoney: m + getm,

isChecked: "2",

})

break;

case "3":

var m = 500;

var getm = this.data.getmoney;

this.setData({

apaymoney: m,

allmoney: m + getm,

isChecked: "3",

})

break;

default:

console.log('---' + "error");

break;

}

},

 

如果问题欢迎沟通，以下是源码地址，如有帮助欢迎star～

源码：https://github.com/CxBingo/RadioButtonDemo

csdn下载：https://download.csdn.net/download/francisbingo/10903390