• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

有问题,多指教!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序隐藏滚动条发布时间:2022-07-18
下一篇:
微信小程序的动画效果发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap