radio组件实现单选项目布局

radio | 微信开放文档 (qq.com)

radio group放多个题目

 1.单选的wxml简单布局示例

<view>题目:你是否为毕业设计而感到苦恼？</view>
<radio-group bindchange="radioChange">
  <view>
    <radio value="{{item.value}}"/>
    <text>是</text>
  </view>
  <view>
    <radio value="{{item.value}}"/>
    <text>否</text>
  </view>
</radio-group>

2.将value赋值（1、0记录分值），并打印出来

 

 

 3.设置data数据记录问卷单选得分

 data:{
    count:0,
    select:''
  },
  //用户选择了选项
  radioChange(e){
    let select=parseInt(e.detail.value)
    console.log('您的得分是：',select)
    this.setData({
      count:select
    })
  }

 4.完善界面，添加下一题的按钮和对应的点击事件

<button type="primary" bindtap="next">下一题</button>

//下一题跳转
  next(){
    console.log('用户点击了下一题')
  }

实现效果：

 5.用户未做选择给提示

 //下一题跳转
  next(){
    console.log('用户点击了下一题')
    //如果用户没有选择，给提示
    if(!this.data.select){
      wx.showToast({
        icon:'error',
        title: '您还没有选择呢',
      })
    }
  }