微信公众号开发

小程序云开发入门——问卷测评小程序实战(2)

本文主要是介绍小程序云开发入门——问卷测评小程序实战(2),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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: '您还没有选择呢',
      })
    }
  }

 

这篇关于小程序云开发入门——问卷测评小程序实战(2)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!