手把手教你搭建消防安全答题小程序-答题页

念无与为乐者，就让我手把手教你搭建知识竞答小程序吧。为啥你的UI界面感觉乱？好看的答题考试小程序，实在是太稀缺了。

软件架构：微信原生小程序+云开发
戳源码地址，获取源码，版本持续迭代中...

答题页布局

第<text class="text-bold text-xl">1</text>题
共<text class="text-bold text-xl">20</text>题

<view class="page__title">
  <text class="text-bold">【单选题】</text>
  当灭火人员能够接近火源时，应迅速利用身边的灭火器材灭火，将火势控制在初期低温少烟阶段，使用的火灾扑救方法是（）。
</view>

<radio-group class="radio-group">
  <label class="radio my-choosebox">
    <radio value="A" checked="false" />
    <text class="margin-left-xs">堵截</text>
  </label>
  <label class="radio my-choosebox">
    <radio value="B" checked="false" />
    <text class="margin-left-xs">快攻</text>
  </label>
  <label class="radio my-choosebox">
    <radio value="C" checked="false" />
    <text class="margin-left-xs">隔离</text>
  </label>
  <label class="radio my-choosebox">
    <radio value="D" checked="false" />
    <text class="margin-left-xs">排烟</text>
  </label>
</radio-group>

<button bindtap='nextSubmit' class="cu-btn bg-red round lg">下一题</button>

<text class="icon-weixin"></text> meng674782630

答题页样式

/ pages/test/test.wxss /
page {
background-color: #fff;
}
.page {
padding: 20rpx;
}
.page__bd {
padding: 20rpx;
}
.my-choosebox {
display: block;
margin-bottom: 20rpx;
}
.toindex-btn {
margin-top: 20rpx;
display:inline-block;
line-height:2.3;
font-size:13px;
padding:0 1.34em;
color: red;
float: right;
}
.page .radio-group, .page .checkbox-group {
display: block;
}
答题页效果图
微信小程序“防火安全知识专项学习与竞答”

好了，今天就写到这里。当前版本，先教大家页面布局与样式。下一个迭代会接入云开发，实现完整的答题小程序功能，敬请期待吧。