小程序：radio实现勾选显示隐藏页面文本显示：附代码

我会带着你远行 2021-09-19 10:28 383阅读 0赞

先看实现效果：

![image][]

代码：

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

有问题，多指教！

[image]: /images/20210913/07a7a22ccd9447c4b2e9a92a5b1b0912.png