微信小程序：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)
  },
})

有問題，多指教！