E企盈营销工具技术服务商 热线:4006-838-530

微信小程序(看文档写实例八)微信小程序课堂宝APP实现练习模块前台

E企盈直播平台营销卖货系统

接上篇博文,这篇主要描述练习模块的前台显示,其中包括test页面,答题detail页面以及提交答题后答卷answer页面。一、练习模块test页面练习页面主要展示的是当前用户的头像,昵称以及学校信息,另外还有答题信息,以及每个章节的练习信息,先来看看效果:grid用的是样式框架weui.wxss,其他也没有什么难度,代码如下:<view class=”page”><view class=’title’><image class=’header-img’ src=”{{weChatUserInfo.avatarUrl}}”/><view class=’info’><text class=’nick-name’>{{weChatUserInfo.nickName}}</text><view class=’school-info’><image class=’school-img’/><text class=’school-name’>{{bmobUserInfo.school}}</text></view></view></view><view class=’test-info’><label class=’test-info-item’><text class=’test-info-item-num’>{{ answerInfo.correctCount}}</text><text class=’test-info-item-desc’>答对题</text></label><label class=’test-info-item’><text class=’test-info-item-num’>{{ answerInfo.itemCount}}</text><text class=’test-info-item-desc’>总题数</text></label><label class=’test-info-item’><text class=’test-info-item-num’>{{ 100*answerInfo.correctE}}%</text><text class=’test-info-item-desc’>正确率</text></label></view><view class=”page__bd”><view class=”weui-grids”><block wx:for=”{{grids}}” wx:key=”unique”><navigator url=”{{item.path}}” class=”weui-grid” hover-class=”weui-grid_active”><view class=”weui-grid__label” style=’font-size: 18px;color:royalblue;’>{{item.chapter}}</view><view class=”weui-grid__label” style=’color:#495056;’>{{item.name}}</view><view class=”weui-grid__label” style=’font-size: 12px;color:rebeccapurple;’>({{item.num}})</view></navigator></block></view></view></view>/* pages/info/payment/payment.wxss */@import “../../utils/weui.wxss”;.weui-form-preview{margin-bottom: 25px;}page{background-color: #F8F8F8;font-size: 16px;font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;}.page__bd {padding-bottom: 40px;}.title{width: 100%;height: 110px;display: flex;flex-direction: row;padding-top: 20px;padding-left: 20px;padding-bottom: 10px;}.header-img{width: 80px;height: 80px;border-radius: 50%;border-color: wheat;border-style: solid;border-width: 2px;}.info{display: flex;flex-direction: column;padding-top: 20px;padding-left: 15px;}.nick-name{font-size: 20px;color: #495056;}.school-info{display: flex;flex-direction: row;}.school-img{width: 25px;height: 25px;background: url(“http://i.pengxun.cn/static/vzan/web/post-big-pic-09.png”) 0px -275px / 100% no-repeat;vertical-align: middle;margin-right: 5px;display: inline-block;}.school-name{font-size: 20px;color: #2f93eb;}.test-info{width: 100%; display: flex;flex-direction: row;}.test-info-item{width: 33%;display: flex;flex-direction: column;padding: 5px;border-top: 1rpx solid #D9D9D9;}.test-info-item-num{text-align: center;font-size: 16px;color: royalblue;}.test-info-item-desc{text-align: center;font-size: 12px;color: #495056;}.weui-grid__icon {display: block;width: 42px !important;height: 42px !important;margin: 0 auto;}二、答题detail页面答题detail页面就是显示用户在test页面点击章节练习后跳转到答题详情页面,看效果:代码如下:<!–pages/test/detail/detail.wxml–><form bindsubmit=”formSubmit”><view class=’section item-block’ style=’text-align: center;font-size=20px;’>{{chooseSeries}} {{chooseType}}</view><view class=’section item-block’ wx:for=”{{chooseItemArray}}” wx:for-item=”i” wx:key=”unique”><view class=’choose-item-title’>{{i.number_id}}、{{i.title}}</view><radio-group class=”radio-group” name=”choose-radio-group{{i.number_id}}”><label class=”radio” wx:for=”{{i.chooseItems}}” wx:key=”unique”><radio value=”{{item.name}}” /> {{item.value}}</label></radio-group></view><view class=’section item-block’><button formType=”submit” class=’btn-commit’>提交</button></view></form>wxss就是前面给的main页面的样式。三、答卷answer页面直接看效果:代码如下:<!–pages/test/answer/answer.wxml–><view class=’section item-block’ style=’text-align: center;font-size=20px;’>{{mAnswers.chooseSeries}} {{mAnswers.chooseType}} (答卷)</view><view class=’section item-block’ wx:for=”{{mAnswers.chooseItemArray}}” wx:for-item=”i” wx:for-index=”indexChoose” wx:key=”unique”><view class=’choose-item-title’>{{i.number_id}}、{{i.title}}</view><radio-group class=”radio-group” name=”choose-radio-group{{i.number_id}}”><label class=”radio” wx:for=”{{i.chooseItems}}” wx:key=”unique”><radio value=”{{item.name}}” disabled=”true” checked='{{item.name==i.answer}}’ /> {{item.value}}</label></radio-group><view class=’choose-item-title ‘ style=’color:green;’ wx:if='{{mAnswers.answers[indexChoose].result}}’>你的答案:{{mAnswers.answers[indexChoose].answer}} 正确答案:{{i.answer}}</view><view class=’choose-item-title ‘ style=’color:red;’ wx:else>你的答案:{{mAnswers.answers[indexChoose].answer}} 正确答案:{{i.answer}}</view><view class=’choose-item-title ‘ style=’color:green;’>解析:{{i.complain}}</view></view><view class=’section item-block’ style=’text-align: center;font-size=20px;color:red;’>答题共{{mAnswers.answers.length}}题,你答对{{correctAnswerCount}}题,得分{{correctAnswerCount*(100/mAnswers.answers.length)}},请继续努力O(∩_∩)O</view>样式也是main.wxss 微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序(看文档写实例八)微信小程序课堂宝APP实现练习模块前台
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏