小程序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～