微信小程序：radio实现按钮显示页面隐藏显示

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)
  },
})

有问题，多指教！