共计 1563 个字符,预计需要花费 4 分钟才能阅读完成。
念无与为乐者,就让我手把手教你搭建常识竞答小程序吧。为啥你的 UI 界面感觉乱?难看的答题考试小程序,切实是太稀缺了。
软件架构:微信原生小程序 + 云开发
戳源码地址,获取源码,版本继续迭代中 …
答题页布局
<!--pages/test/test.wxml-->
<view class="page">
<view class="padding-top text-center">
第 <text class="text-bold text-xl">1</text> 题
共 <text class="text-bold text-xl">20</text> 题
</view>
<view class='page__hd padding'>
<view class="page__title">
<text class="text-bold">【单选题】</text>
当灭火人员可能靠近火源时,应迅速利用身边的灭火器材灭火,将火势管制在初期高温少烟阶段,应用的火灾扑救办法是()。</view>
</view>
<view class="page__bd">
<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>
</view>
<view class='page_ft flex padding flex-direction'>
<button bindtap='nextSubmit' class="cu-btn bg-red round lg"> 下一题 </button>
</view>
<view class="mw-weixin text-center text-gray padding-top">
<text class="icon-weixin"></text> meng674782630
</view>
</view>
答题页款式
/* 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;}
答题页效果图
好了,明天就写到这里。以后版本,先教大家页面布局与款式。下一个迭代会接入云开发,实现残缺的答题小程序性能,敬请期待吧。
正文完