激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

界面交互篇:答題頁布局樣式與邏輯交互開發(fā)

發(fā)布時間：2024-01-18 20:04:48 瀏覽量：244次

微信小程序云開發(fā)實戰(zhàn)-答題積分賽小程序

界面交互篇：答題頁布局樣式與邏輯交互開發(fā)

答題頁原型稿

實現(xiàn)思路分析：

1）答題未選中狀態(tài)；

2）答題已選中狀態(tài)，點擊確定提交選中結(jié)果；

3）顯示答案以及題目解析，如回答正確，自動進入下一題；如回答錯誤，停留在當(dāng)前答題頁面；

4）每次答完10題，答對分數(shù)才會計入積分；

5）最后系統(tǒng)自動判分，然后出成績單。


答題頁效果圖


答題頁布局與樣式實現(xiàn)

使用 flex 布局即可快速實現(xiàn)各區(qū)域模塊的排版布局：

1）頁面布局主要使用flex布局；

2）個人信息展示區(qū)域采用flex-wrap；

3）答題詳情展示區(qū)域采用flex-sub；

4）操作按鈕組區(qū)域采用flex-direction；

個人信息展示區(qū)域

在test.wxml中，編寫布局代碼：

<view class="page-con">
  <view class="page">
    <view class="flex flex-wrap solids-bottom padding-bottom">
      <view class='basis-xs'>
        <view class="cu-avatar round lg margin-left">
          <image class="avatar" src="/images/0.png" mode="widthFix"></image>
        </view>
      </view>
      <view class='basis-xl'>
        <view class="padding-top text-bold text-black">
          姑蘇洛言
        </view>
      </view>
    </view>
  </view>
</view>

在test.wxss中，編寫樣式代碼：

page {
  background-color: #fff;
}
.page-con {
  padding: 20rpx;
}
.page {
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
}

保存后，可以在模擬器預(yù)覽效果或者手機微信掃碼后預(yù)覽。


答題進度展示區(qū)域

在test.wxml中，編寫布局代碼：

<view class="text-center padding-top">
  當(dāng)前第<text class="text-xl text-bold">1</text>題
  共<text class="text-xl text-bold">10</text>題
</view>

保存后，可以在模擬器預(yù)覽效果或者手機微信掃碼后預(yù)覽。


題目信息展示區(qū)域

在test.wxml中，編寫布局代碼：

<view class='page-hd'>
    <view class="page-title">
        <text class="text-bold">【單選題】</text>
        下列網(wǎng)絡(luò)系統(tǒng)安全原則，錯誤的是：（）
    </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">A、靜態(tài)性</text>
    </label>
    <label class="radio my-choosebox">
      <radio value="B" checked="false" />
      <text class="margin-left-xs">B、嚴(yán)密性</text>
    </label>
    <label class="radio my-choosebox">
      <radio value="C" checked="false" />
      <text class="margin-left-xs">C、整體性</text>
    </label>
    <label class="radio my-choosebox">
      <radio value="D" checked="false" />
      <text class="margin-left-xs">D、專業(yè)性</text>
    </label>
  </radio-group>
</view>

在test.wxss中，編寫樣式代碼：

.page-hd {
  padding: 30rpx 0;
}
.page-bd {
  padding: 20rpx;
}
.page .radio-group, .page .checkbox-group {
  display: block;
}
.my-choosebox {
  display: block;
  margin-bottom: 20rpx;
  border: 2rpx solid #ddd;
  padding: 20rpx;
  border-radius: 50rpx;
}

保存后，可以在模擬器預(yù)覽效果或者手機微信掃碼后預(yù)覽。


操作按鈕展示區(qū)域

在test.wxml中，編寫布局代碼：

<view class='page-ft flex flex-direction padding padding-bottom-xl'>
  <button class="cu-btn lg round bg-sky">確定</button>
</view>

保存后，可以在模擬器預(yù)覽效果或者手機微信掃碼后預(yù)覽。


選中選項狀態(tài)

選中選項狀態(tài)時，只需要把radio的checked屬性值設(shè)置為true即可。


點擊確定后狀態(tài)

點擊確定按鈕后的界面狀態(tài)會有所變化：

①【確定】按鈕隱藏，顯示【下一題】按鈕；

②顯示【正確答案】欄目；

在test.wxml中，編寫布局代碼：

<button class="cu-btn lg round line-sky">下一題</button>

在test.wxml中，編寫布局代碼：

<view class='padding-bottom page-hd padding-top solids-top'>
    <view class="page-title">
      <text class="text-bold">【正確答案】</text>
      A
    </view>
</view>



應(yīng)用場景

不少企事業(yè)單位常常會舉辦一些主題知識競賽，但是目前缺乏一套可靠、美觀、簡便的答題小程序。比如適用于網(wǎng)絡(luò)安全知識答題、交通安全答題、 消防安全知識宣傳、 安全生產(chǎn)知識學(xué)習(xí)等答題活動或有獎競答。

小結(jié)

因此我搭建了最新版的知識競答小程序，提煉了典型的業(yè)務(wù)模型，它可以幫助你快速搭建各種形式的答題軟件產(chǎn)品，幫助大家可以定期舉辦各類知識競答活動。

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定