手把手教你搭建知识竞答小程序系列，前面的两篇，分别写了如何搭建答题小程序的首页和答题页，今天就让我把答题结果页写写吧。

软件架构：微信原生小程序+云开发

戳消防安全知识竞答活动小程序: 优质的消防安全知识竞答活动小程序，内含源码，版本计划持续迭代中……，获取源码，版本持续迭代中…

答题结果页布局

									<view class="page">   <view class="padding">     <view class='page-head'>       <view class="page-title text-lg text-bold text-black padding-bottom-xs">         消防安全知识线上答题活动       </view>       <view>共20题，满分100分</view>       <view class='page-score'>         <text class="score-num text-red text-bold">90分</text>       </view>     </view>     <view class='page-footer'>       <view class='padding flex text-center text-grey bg-white radius margin-bottom'>         <view class='flex flex-sub flex-direction solid-right'>           <view class="text-xxl text-red">18题</view>           <view class="margin-top-sm">             答对</view>         </view>         <view class='flex flex-sub flex-direction solid-right'>           <view class="text-xxl text-gray">2题</view>           <view class="margin-top-sm">             答错</view>         </view>         <view class='flex flex-sub flex-direction'>           <view class="text-green text-xxl">             90%           </view>           <view class="margin-top-sm">             正确率</view>         </view>       </view>       <view class="flex padding flex-direction">         <button bindtap="toDoWrong" hover-class="other-button-hover" class="cu-btn bg-red round lg"> 再答一次 </button>         <button bindtap="toIndex" hover-class="other-button-hover" class="cu-btn line-red round lg margin-top"> 返回首页 </button>       </view>     </view>   </view>   <view class="mw-weixin text-center text-gray">     <text class="icon-weixin"></text> meng674782630   </view> </view>

答题结果页样式

									/* pages/results/results.wxss */ page {   background-color: #fff; } .page {   padding: 30rpx; } .mw-avatar {   width: 128rpx;   height: 128rpx;   border-radius: 50%;   overflow: hidden; } .page-score {   display: flex;   justify-content: center;   align-items: flex-end;   padding-top:20rpx;   padding-bottom:20rpx; } .score-num {   font-size:100rpx; } .page-footer {   margin-top:50rpx;   text-align: center; }

答题结果页效果图

好了，今天就写到这里了。当前的这个版本，先教大家答题考试小程序端的页面布局与样式编写。下一个迭代版本会接入云开发，全面实现完整的答题考试系统，敬请关注吧。

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：http://www.cyclm.com/73649.html

探花流出视频在线观看 答题小程序源代码（可以出题的答题小程序）

软件架构：微信原生小程序+云开发

相关推荐

探花流出视频在线观看答题小程序源代码（可以出题的答题小程序）