亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

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

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

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

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

答題頁原型稿

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

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

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

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

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;
}

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


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

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

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

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


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

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

<view class='page-hd'>
    <view class="page-title">
        <text class="text-bold">【單選題】</text>
        下列網(wǎng)絡系統(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、嚴密性</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;
}

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


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

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

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

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


選中選項狀態(tài)

選中選項狀態(tài)時，只需要把radio的checked屬性值設置為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è)單位常常會舉辦一些主題知識競賽，但是目前缺乏一套可靠、美觀、簡便的答題小程序。比如適用于網(wǎng)絡安全知識答題、交通安全答題、 消防安全知識宣傳、 安全生產(chǎn)知識學習等答題活動或有獎競答。

小結

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

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