radio实现按钮显示页面隐藏显示
效果:
![image](https://upload-images.jianshu.io/upload_images/17516483-1e925d552ea792c0.gif?imageMogr2/auto-orient/strip)
代码:
wxml:
<view style="display:flex;padding:100rpx">
<radio-group wx:key="name" bindchange="radioChange1">
<radio wx:key="index" wx:for="{{pageone}}" bindtap="bindtap1" value="{{item.name}}" checked="{{item.checked}}">
<text>{{item.text}}</text>
</radio>
</radio-group>
<radio-group wx:key="name" bindchange="radioChange2">
<radio wx:key="index" wx:for="{{pagetwo}}" bindtap="bindtap2" value="{{item.name}}" checked="{{item.checked}}">
<text>{{item.text}}</text>
</radio>
</radio-group>
<radio-group wx:key="name" bindchange="radioChange3">
<radio wx:key="index" wx:for="{{pagethree}}" bindtap="bindtap3" value="{{item.name}}" checked="{{item.checked}}">
<text>{{item.text}}</text>
</radio>
</radio-group>
</view>
<!-------------pages1---------------------->
<include src="../pagetext/pages1.wxml" />
<!--------------pages2------------------------------>
<include src="../pagetext/pages2.wxml" />
<!------------pages3--------------------------------->
<include src="../pagetext/pages3.wxml" />
<!------------------------------------>
新建pages1页:pages2页,pages3页 ,直接在同个文件夹下新建wxml即可!
pages1:wxml
<view wx:key="key" wx:for="{{pageone}}">
<view wx:if="{{item.checked==true}}">
<view style='background-color:blue;padding:30rpx'>
<view>pages1</view>
这是pages1页,点击勾选pages1显示
</view>
</view>
</view>
pages2:wwxml
<view wx:key="key" wx:for="{{pagetwo}}">
<view wx:if="{{item.checked==true}}">
<view style='background-color:blue;padding:30rpx'>
<view>pages2</view>
这是pages2页,点击勾选pages2显示
</view>
</view>
</view>
pages3:wwxml
<view wx:key="key" wx:for="{{pagthree}}">
<view wx:if="{{item.checked==true}}">
<view style='background-color:blue;padding:30rpx'>
<view>pages3</view>
这是pages3页,点击勾选pages3显示
</view>
</view>
</view>
js:
Page({
data: {
pageone: [{
name: 'pages1',
text: 'pages1',
checked: false
}],
pagetwo: [{
name: 'pages2',
text: 'pages2',
checked: false
}],
pagethree: [{
name: 'pages3',
text: 'pages3',
checked: false
}],
},
// 获取value的值
radioChange1: function (e) {
let pages1 = e.detail.value;
this.setData({
seleted: "选中的value:" + pages1
})
console.log('radio发生change事件,携带value值为:', e.detail.value)
},
bindtap1: function (e) {
var newpage = this.data.pageone; /*获取brand数组*/
newpage[0].checked = !(newpage[0].checked);
this.setData({
pageone: newpage
});
console.log('newpage', newpage)
},
radioChange2: function (e) {
let pages2 = e.detail.value;
this.setData({
seleted: "选中的value:" + pages2
})
console.log('radio发生change事件,携带value值为:', e.detail.value)
},
bindtap2: function (e) {
var newpage = this.data.pagetwo; /*获取brand数组*/
newpage[0].checked = !(newpage[0].checked);
this.setData({
pagetwo: newpage
});
console.log('newpage', newpage)
},
radioChange3: function (e) {
let pages3 = e.detail.value;
this.setData({
seleted: "选中的value:" + pages3
})
console.log('radio发生change事件,携带value值为:', e.detail.value)
},
bindtap3: function (e) {
var newpage = this.data.pagethree; /*获取brand数组*/
newpage[0].checked = !(newpage[0].checked);
this.setData({
pagethree: newpage
});
console.log('newpage', newpage)
},
})
有问题,多指教!