radio实现按钮显示页面隐藏显示
效果:
代码:
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) }, })
有问题,多指教!
请发表评论