序文：私は最近会社で遊んでいますが、たまたまチームがオンライン試験に合格する必要があるため、簡単な試験であるWeChatアプレットを自発的に使用しました。純粋なフロントエンド。データはdata.jsonファイルに書き込まれ、各テスト結果はキャッシュに保存されます。
1.テストデータ
小さなプログラムプロジェクトを作成すると、インデックスページとログページが既に存在することがわかります。ページフォルダーと同じレベルに新しいデータフォルダーを追加し、データを格納する新しいjson.jsファイルを作成します。
1.データ形式：
// data/json.js
var json = {
"001": [
{
"question": "爸爸的爸爸叫什么?",
"option": {
"A": "爷爷",
"B": "姥爷",
"C": "叔叔",
"D": "伯伯",
"E": "阿姨",
"F": "老舅"
},
"true": "A", // 正确答案
"type": 1, // 类型 1 单选 2 多选
"scores": 10, // 分值
"checked": false // 默认没有选中
},
{
"question": "妈妈的姐妹叫什么?",
"option": {
"A": "姥姥",
"B": "奶奶",
"C": "叔叔",
"D": "大姨",
"E": "小姨",
"F": "老舅"
},
"true": ["D", "E"], // 正确答案
"type": 2, // 类型 1 单选 2 多选
"scores": 10, // 分值
"checked": false // 默认没有选中
},
... ...
],
"002": [
// ...数据格式同上
]
}
2.データをエクスポートする
// data/json.js
var json = {...}
module.exports = {
questionList: json
}
データを定義したら、module.exportsを使用してjson.jsの最後にエクスポートします。
3.データをインポートする
// app.js
// 导入数据
var jsonList = require('data/json.js');
App({
globalData: {
questionList: jsonList.questionList // 拿到答题数据
}
})
app.jsのrequireを使用してデータをインポートし、グローバル変数globalDataで定義します。今後使用する場合：
首先 var app = getApp();
然后 app.globalData.questionList 就可以拿到导出的json数据。
テストペーパーのセットが1つしかないため、jsonで001と002の2つの配列を定義しました。その後、app.globalData.questionList["001"]テストデータを選択的にインポートできます。
2.ホームページ（試験の入り口）
ページフォルダにホームページを追加します。ホームページへのログインが承認されたら、クリックしてこのページにジャンプします。このページには、001と002の2つのモジュールがあります。モジュールをクリックして、対応する試験を受けてください。
1.メインコード
home.wxml
<view class="page">
<view class="page-title">请选择试题：</view>
<view class="flex-box">
<view class="flex-item"><view class="item bc_green" bindtap="toTestPage" data-testId="001">001</view></view>
<view class="flex-item"><view class="item bc_red" bindtap="toTestPage" data-testId="002">002</view></view>
</view>
</view>
home.js
Page({
data: {
},
onLoad: function (options) {
},
toTestPage: function (e) {
let testId = e.currentTarget.dataset['testid'];
wx.navigateTo({
url: '../test/test?testId=' + testId
})
}
})
2.ページ
3.回答ページと終了ページ
001または002のテスト問題であるかどうかに関係なく、それらは一連のページテンプレートを共有します。このページでは、質問への回答（テスト用紙に入力するたびに、テストの質問を整理する必要があります）、採点、間違った質問の表示、回答データの記録（時間/質問ID /スコア）の機能を実現する必要があります。
1.簡単な質問と回答のページ（テストページ）を実装する
最初にテストページフォルダを作成し、test.wxmlファイルに回答テンプレートを記述します。最初のステップでは、無秩序な順序付けと回答の記録の機能を考慮せず、回答と次の質問を選択してスコアリングするという単純な機能のみを実現します。
test.wxml解析
回答テンプレートは非常にシンプルで、主に質問、回答（単一選択/複数選択）、次の質問（送信）、および終了回答で構成されています。
test.wxmlコード
<!--pages/test/test.wxml-->
<view class="page">
<!--标题-->
<view class='page__hd'>
<view class="page__title">
{
{index+1}}、{
{questionList[index].question}}
{
{questionList[index].type==1?"【单选】":"【多选】"}}
（{
{questionList[index].scores}}分）
</view>
</view>
<!--内容-->
<view class="page__bd">
<radio-group class="radio-group" bindchange="radioChange" wx:if="{
{questionList[index].type == 1}}">
<label class="radio my-choosebox" wx:for="{
{questionList[index].option}}" wx:for-index="key" wx:for-item="value">
<radio value="{
{key}}" checked="{
{questionList[index].checked}}"/>{
{key}}、{
{value}}
</label>
</radio-group>
<checkbox-group bindchange="checkboxChange" wx:else>
<label class="checkbox my-choosebox" wx:for="{
{questionList[index].option}}" wx:for-index="key" wx:for-item="value">
<checkbox value="{
{key}}" checked="{
{questionList[index].checked}}"/>{
{key}}、{
{value}}
</label>
</checkbox-group>
</view>
<!--按钮-->
<view class='page_ft'>
<view class='mybutton'>
<button bindtap='nextSubmit' wx:if="{
{index == questionList.length-1}}">提交</button>
<button bindtap='nextSubmit' wx:else>下一题</button>
<text bindtap='outTest' class="toindex-btn">退出答题</text>
</view>
</view>
</view>
test.wxssスタイル
/* pages/test/test.wxss */
.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:#576b95;
text-decoration:underline;
float: right;
}
test.js分析
test.js
var app = getApp();
Page({
data: {
index: 0, // 题目序列
chooseValue: [], // 选择的答案序列
totalScore: 100, // 总分
wrongList: [], // 错误的题目集合
},
onLoad: function (options) {
console.log(options);
wx.setNavigationBarTitle({ title: options.testId }) // 动态设置导航条标题
this.setData({
questionList: app.globalData.questionList[options.testId], // 拿到答题数据
testId: options.testId // 课程ID
})
},
/*
* 单选事件
*/
radioChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
this.data.chooseValue[this.data.index] = e.detail.value;
console.log(this.data.chooseValue);
},
/*
* 多选事件
*/
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
this.data.chooseValue[this.data.index] = e.detail.value.sort();
console.log(this.data.chooseValue);
},
/*
* 下一题/提交 按钮
*/
nextSubmit: function () {
// 如果没有选择
if (this.data.chooseValue[this.data.index] == undefined || this.data.chooseValue[this.data.index].length == 0) {
wx.showToast({
title: '请选择至少一个答案!',
icon: 'none',
duration: 2000,
success: function () {
return;
}
})
return;
}
// 判断答案是否正确
this.chooseError();
// 判断是不是最后一题
if (this.data.index < this.data.questionList.length - 1) {
// 渲染下一题
this.setData({
index: this.data.index + 1
})
} else {
// 跳转到结果页
}
},
/*
* 错题处理
*/
chooseError: function () {
var trueValue = this.data.questionList[this.data.index]['true'];
var chooseVal = this.data.chooseValue[this.data.index];
console.log('选择了' + chooseVal + '答案是' + trueValue);
if (chooseVal.toString() != trueValue.toString()) {
this.data.wrongList.push(this.data.index);
this.setData({
totalScore: this.data.totalScore - this.data.questionList[this.data.index]['scores'] // 扣分操作
})
}
}
})
この時点で、簡単な回答と次のページが完成します。
2.終了ページ（結果ページ）
前に質問の表示と次の質問の操作を理解しましたが、最後の質問の送信ボタンはどうなりますか？通常は、質問への回答結果をユーザーに通知します。以下では、ユーザーの回答結果を表示する結果ページを作成します（スコア、評価、間違った質問のチェックボタン、ホームに戻るボタンを含む）
test.jsジャンプしてパラメーターを渡す
// 跳转到结果页
let wrongList = JSON.stringify(this.data.wrongList);
let chooseValue = JSON.stringify(this.data.chooseValue);
wx.navigateTo({
url: '../results/results?totalScore=' + this.data.totalScore + '&wrongList=' + wrongList + '&chooseValue=' + chooseValue
})
まず、test.jsのnextSubmit関数を改善して、送信ボタンをクリックすると結果ページにジャンプするようにする必要があります。ここでは、3つのデータを渡しています。totalScoreスコア、wrongList、間違った質問コレクション、chooseValueユーザーが選択した回答コレクションです。
results.wxml
最初に結果ページのページ構造を見てみましょう
results.wxmlコード
<view class="page">
<!--标题-->
<view class='page-head'>
<view class="page-title">
答题结束！您的得分为:
</view>
<!--分数-->
<view class='page-score'>
<text class="score-num">{
{totalScore}}</text>
<text class="score-text">分</text>
</view>
<text class="score-remark">{
{totalScore==100?remark[0]:(totalScore>=80?remark[1]:remark[2])}}</text> <!-- 评价 -->
</view>
<!--查询错误-->
<view class='page-footer'>
<view class="wrong-view" wx:if="{
{wrongList.length > 0}}">
<text>错误的题数：</text>
<text wx:for="{
{wrongList}}">[{
{item-0+1}}]</text> 题
</view>
<view class="wrong-btns">
<button type="default" bindtap="toView" hover-class="other-button-hover" class="wrong-btn" wx:if="{
{wrongList.length > 0}}"> 点击查看 </button>
<button type="default" bindtap="toIndex" hover-class="other-button-hover" class="wrong-btn"> 返回首页 </button>
</view>
</view>
</view>
results.js
// pages/results/results.js
var app = getApp();
Page({
data: {
totalScore: null, // 分数
wrongList: [], // 错误的题数
chooseValue: [], // 选择的答案
remark: ["好极了！你很棒棒哦", "哎哟不错哦", "别灰心，继续努力哦！"], // 评语
},
onLoad: function (options) {
console.log(options);
wx.setNavigationBarTitle({ title: options.testId }) // 动态设置导航条标题
let wrongList = JSON.parse(options.wrongList);
let chooseValue = JSON.parse(options.chooseValue);
this.setData({
totalScore: options.totalScore,
wrongList: wrongList,
chooseValue: chooseValue
})
console.log(this.data.chooseValue);
},
// 查看错题
toView: function () {
},
// 返回首页
toIndex: function () {
wx.switchTab({
url: '../home/home'
})
}
})
- 分析：onLoad関数で、必要なデータを取得していることがわかります：totalScoreユーザースコア、wrongList間違った質問コレクション、chooseValueユーザーが選択した回答。その後、ページに自動的にレンダリングされます。
- 配列型のデータは、JSON.parse（）で変換する必要があります。
4、間違った質問シェルコンポーネントを表示する
間違った質問のポップアップを表示する（wrongModalポップアップコンポーネント）
結果ページにクリックして表示するボタンがあることがわかります。クリックすると、レイヤーがポップアップし、ユーザーの誤った質問情報が表示されます。間違った質問、ユーザーが選択した回答、および質問に対する正しい回答を含みます。
結果はコンポーネント爆弾層を使用します
まず、results.jsonファイルで構成します
// results.json
{
"navigationBarTitleText": "WeChatTest",
"usingComponents": {
"wrong-modal": "/components/wrongModal/wrongModal"
}
}
次に、results.wxmlにコンポーネントを導入します
<wrong-modal modalShow="{
{modalShow}}" wrongList="{
{wrongList}}" wrongListSort="{
{wrongListSort}}" chooseValue="{
{chooseValue}}" questionList="{
{questionList}}" testId="{
{testId}}"></wrong-modal>
wrongModal.wxml
<!--components/wrongModal/wrongModal.wxml-->
<view class="modal-page" wx:if="{
{modalShow}}">
<view class="modal-mask" bindtap="closeModal"></view>
<!-- 内容 -->
<view class="modal-content">
<view class="modal-title">
题目: {
{questionList[wrongList[index]].question}}
{
{questionList[wrongList[index]].type==1?"【单选】":"【多选】"}}
（{
{questionList[wrongList[index]].scores}}分）
</view>
<view class="modal-body">
<radio-group class="radio-group" bindchange="radioChange" wx:if="{
{questionList[wrongList[index]].type == 1}}">
<label class="radio my-choosebox" wx:for="{
{questionList[wrongList[index]].option}}" wx:for-index="key" wx:for-item="value">
<radio disabled="{
{true}}" value="{
{key}}" checked="{
{questionList[wrongList[index]].checked}}"/>{
{key}}、{
{value}}
</label>
</radio-group>
<checkbox-group bindchange="checkboxChange" wx:else>
<label class="checkbox my-choosebox" wx:for="{
{questionList[wrongList[index]].option}}" wx:for-index="key" wx:for-item="value">
<checkbox disabled="{
{true}}" value="{
{key}}" checked="{
{questionList[wrongList[index]].checked}}"/>{
{key}}、{
{value}}
</label>
</checkbox-group>
</view>
<!-- 答案解析 -->
<view class="modal-answer">
<text class="answer-text wrong-answer">
您的答案为 {
{chooseValue[wrongList[index]]}}
</text>
<text class="answer-text true-answer">
正确答案为 {
{questionList[wrongList[index]]['true']}}
</text>
</view>
<!-- 操作按钮 -->
<view class="modal-button">
<view wx:if="{
{index == wrongList.length-1}}" class="modal-btns">
<button bindtap='again' class="modal-btn">再来一次</button>
<button bindtap='toIndex' class="modal-btn">返回首页</button>
</view>
<button bindtap='next' wx:else class="modal-btn">下一题</button>
</view>
</view>
</view>
wrongModal.js
// components/wrongModal/wrongModal.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示
modalShow: {
type: Boolean,
value: false
},
// 题库
questionList: {
type: Array,
value: []
},
// 课程ID
testId: {
type: String,
value: '101-1'
},
// 错题题序集合
wrongList: {
type: Array,
value: []
},
// 选择的答案集合
chooseValue: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
index: 0 // wrongList的index
},
/**
* 组件的方法列表
*/
methods: {
// 下一题
next: function () {
if (this.data.index < this.data.wrongList.length - 1) {
// 渲染下一题
this.setData({
index: this.data.index + 1
})
}
},
// 关闭弹窗
closeModal: function () {
this.setData({
modalShow: false
})
},
// 再来一次
again: function () {
wx.reLaunch({
url: '../test/test?testId=' + this.data.testId
})
},
// 返回首页
toIndex: function () {
wx.reLaunch({
url: '../home/home'
})
}
}
})
コンポーネントによって受信されるデータを定義するために、主にコンポーネントコンポーネントのプロパティでコードを理解するのは簡単であり、メソッドはメソッドで定義されます。ファイル構造とイベントはどちらもテストページとよく似ています。主な違いは、wrongModalページにフィルターされたユーザーの誤った質問が表示されることです。
- 解析中
questionList[wrongList[index]] // 试题[错题集合[当前index]]
例如用户第2、3题答题错误(index从0开始) 错题集合=[2,3] 当前index=0 下一题index+1
那么依次展示的就是questionList[2]、questionList[3]题
これで、簡単な応答アプレットが実装されました。001の質問バンクに20の質問がある場合、毎回ランダムに10の質問を選択して評価する必要があり、これらの10の質問は順不同に配置されます。私は何をすべきか？順不同のステップを追加するだけです。
5、順不同
1.順不同で実現
jsコード
onLoad: function (options) {
// ... ...省略
let count = this.generateArray(0, this.data.questionList.length - 1);
this.setData({
shuffleIndex: this.shuffle(count).slice(0, 10) // 生成随机题序并进行截取
})
console.log(this.data.shuffleIndex); // [2,0,3,1,5,4...]
},
/*
* 数组乱序/洗牌
*/
shuffle: function (arr) {
let i = arr.length;
while (i) {
let j = Math.floor(Math.random() * i--);
[arr[j], arr[i]] = [arr[i], arr[j]];
}
return arr;
},
/**
* 生成一个从 start 到 end 的连续数组
*/
generateArray: function (start, end) {
return Array.from(new Array(end + 1).keys()).slice(start)
},
test.wxml
- 分析：交換する
ページ上のすべてをquestionList[index]してquestionList[shuffleIndex[index]]、shuffleIndex障害の後にタイトルの添字を格納した配列です。インデックスコントロールを使用して、順番に並んでいない質問を順番に表示します。
2.結果ページと間違った質問の箇条書きレイヤーコンポーネントを改善する
- 上記を実行した後、次のことがわかりました。
- 結果ページの間違った質問の順序も順不同
- クリックして、ポップアップwrongModalの間違った質問を表示し、ユーザーの間違った質問は一貫していません（wrongModalのデータは依然として正しい順序の添え字であるため）
- ユーザーが選択した回答は、wrongModalで選択された回答と一致しません。（理由は上記と同じです）
- 解決する：
テストページ（test.js）
①データ
data: {
index: 0, // 题目序列
chooseValue: [], // 选择的答案序列
totalScore: 100, // 总分
wrongList: [], // 错误的题目集合-乱序
wrongListSort: [], // 错误的题目集合-正序
},
データにwrongListSortコレクションを追加しました
②chooseErrorメソッド
// chooseError 错题处理方法更改如下
chooseError: function () {
var trueValue = this.data.questionList[this.data.shuffleIndex[this.data.index]]['true'];
var chooseVal = this.data.chooseValue[this.data.index];
console.log('选择了' + chooseVal + '答案是' + trueValue);
if (chooseVal.toString() != trueValue.toString()) {
this.data.wrongList.push(this.data.shuffleIndex[this.data.index]);
this.data.wrongListSort.push(this.data.index);
this.setData({
totalScore: this.data.totalScore - this.data.questionList[this.data.shuffleIndex[this.data.index]]['scores'] // 扣分操作
})
}
}
- 分析：
var trueValue = this.data.questionList[this.data.shuffleIndex[this.data.index]]['true'];
// 当前正确答案更新为 乱序排列后的当前题的正确答案
this.data.wrongList.push(this.data.shuffleIndex[this.data.index]);
// wrongList错题集合里保存 乱序排列后的错题题序，
如错误的题为: [2,0,3] 相当于 001题库的[2,0,3]
this.data.wrongListSort.push(this.data.index);
// wrongListSort错题集合里保存 当前题目相对于乱序排列后的题的下标
例如 shuffleIndex = [2,0,1,3] 用户做错了第3、4题， wrongListSort保存为[2,3]
this.setData({
totalScore: this.data.totalScore - this.data.questionList[this.data.shuffleIndex[this.data.index]]['scores'] // 扣分操作
})
// 扣分操作，逻辑同上，扣的是乱序后对应的题目分值
③nextSubmitメソッド
// 判断是不是最后一题
if (this.data.index < this.data.questionList.length - 1) {
// ...
} else {
// 跳转到结果页
let wrongList = JSON.stringify(this.data.wrongList);
let wrongListSort = JSON.stringify(this.data.wrongListSort);
let chooseValue = JSON.stringify(this.data.chooseValue);
wx.navigateTo({
url: '../results/results?totalScore=' + this.data.totalScore + '&wrongList=' + wrongList + '&chooseValue=' + chooseValue + '&wrongListSort=' + wrongListSort + '&testId=' + this.data.testId
})
}
wrongListSortを結果ページに渡します（注：ここのwrongListも一連の順序が正しくない質問に更新されています）
結果ページ
①results.js
// results.js
data: {
wrongList: [], // 错误的题数-乱序
wrongListSort: [], // 错误的题数-正序
},
onLoad: function (options) {
// ... 省略
let wrongList = JSON.parse(options.wrongList);
let wrongListSort = JSON.parse(options.wrongListSort);
this.setData({
wrongList: wrongList,
wrongListSort: wrongListSort,
})
},
WrongListSortはデータで定義され、onLoadライフサイクルで受信および割り当てられます。
②results.wxml
// results.wxml
<view class="wrong-view" wx:if="{
{wrongList.length > 0}}">
<text>错误的题数：</text>
<text wx:for="{
{wrongListSort}}">[{
{item-0+1}}]</text> 题
</view>
<wrong-modal modalShow="{
{modalShow}}" wrongList="{
{wrongList}}" wrongListSort="{
{wrongListSort}}" chooseValue="{
{chooseValue}}" questionList="{
{questionList}}" testId="{
{testId}}"></wrong-modal>
- 分析：
間違った数の質問：wrongListが表示される場合、それは質問バンクに対する[2]、[0]、[3]の無秩序効果であり、wrongListSortは現在のテストに対する間違った質問のインデックスを表示します。
<wrong-modal>コンポーネントバインディングwrongListSortデータ。理由：
wrongListSortには、使用する必要のある別のシーン、つまり間違ったモーダルブレットレイヤーがあり、「選択した答えはXXです」と表示されます。test.jsでは、現在の質問の下付き文字に基づいて、この試験に設定されたユーザーのオプションを保存します。
// test.js
this.data.chooseValue[this.data.index] = e.detail.value;
たとえば、合計3つの質問がある場合、this.data.chooseValue = ["B"、 "C"、["A"、 "D"]]は、
3つの質問のユーザーオプションに対応します。ユーザーが2番目と3番目の質問に正しく答えない場合、 wrongListSortに格納されるのは、間違った質問の添え字[1,2]であり、現在の間違った質問のユーザーオプションは、インデックスを切り替えることで順番に取得できます。
// wrongModal.wxml
{
{chooseValue[wrongListSort[index]]}}
wrongModalコンポーネント
①wrongModal.js
// wrongModal.js
properties: {
// ... 省略
// 错题题数-乱序
wrongList: {
type: Array,
value: []
},
// 错题题数-正序
wrongListSort: {
type: Array,
value: []
}
},
プロパティは新たに受信するwrongListSortデータを定義します
①wrongModal.wxml
// wrongModal.wxml
<!-- 答案解析 -->
<view class="modal-answer">
<text class="answer-text wrong-answer">
您的答案为 {
{chooseValue[wrongListSort[index]]}}
</text>
<text class="answer-text true-answer">
正确答案为 {
{questionList[wrongList[index]]['true']}}
</text>
</view>
【正解です】式が更新されました。
5.ユーザーの回答データをキャッシュする
まず、ユーザーの回答データを表示するための「ログ」ページが必要です。小さなプログラムプロジェクトを作成するときにログページが生成されているので、それを変更するだけです。
1.キャッシュを設定する
これは純粋なフロントエンドの小さなプログラムであるため、キャッシュを使用してアンサーレコードを保存します。test.jsで設定します。
// test.js
// 设置缓存
var logs = wx.getStorageSync('logs') || []
let logsList = { "date": Date.now(), "testId": this.data.testId, "score": this.data.totalScore }
logs.unshift(logsList);
wx.setStorageSync('logs', logs);
各回答の最後に、現在のログキャッシュデータを取得し、データ形式（現在のタイムスタンプ/質問ID /スコア）をlogListで手動で定義し、取得したログデータに追加し、最後にwx.setStorageSync()インターフェイスを呼び出してログデータを保存します。
2.キャッシュを取得する
logs.js
//logs.js
const util = require('../../utils/util.js')
Page({
data: {
logs: [],
},
onShow: function () {
this.setData({
logs: this.formatLogs()
})
},
// 拿到缓存并格式化日期数据
formatLogs: function () {
let newList = [];
(wx.getStorageSync('logs') || []).forEach(log => {
if (log.date) {
log['date'] = util.formatTime(new Date(log.date));
newList.push(log);
}
})
return newList;
}
})
データの時刻はタイムスタンプであるため、util.jsファイルをインポートし、内部のformatTimeメソッドを使用して時刻形式を変換します。
データでは、ログの空の配列を定義します。formatLogs関数ではwx.getStorageSync('logs')、バッファーを取得し、時間format-addをトラバース変換して新しい空の配列に変換し、最後に新しい配列に戻ります。OnShowライフサイクルでは、formatLogsメソッドを呼び出して、ログに値を割り当てます。
3.データのレンダリング
logs.wxml
<!--logs.wxml-->
<view class="page">
<view class="table" wx:if="{
{logs.length>0}}">
<view class="tr bg-w">
<view class="th first">时间</view>
<view class="th">试题</view>
<view class="th ">得分</view>
</view>
<block wx:for="{
{logs}}" wx:for-item="item">
<view class="tr">
<view class="td first">{
{item.date}}</view>
<view class="td">{
{item.testId}}</view>
<view class="td">{
{item.score}}</view>
</view>
</block>
</view>
<view class="no-record" wx:else>
<image src="/image/wechat.png" class="no-image"></image>
<text class="no-text">没有数据哦~</text>
</view>
</view>
自分でテーブル構造を作成し、ログキャッシュデータをトラバースし、応答時間/テストID /スコアなどのデータを表示します。ここでもデータがないと判断したので、データがないというヒントを示します。
logs.wxss
.table {
border: 0px solid darkgray;
font-size: 12px;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 2rem;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
}
.bg-w{
background: snow;
}
.th {
width: 40%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 2rem;
align-items: center;
}
.first {
flex:1 0 auto;
}
.no-record {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.no-image {
width: 200rpx;
height: 200rpx;
margin-top: 200rpx;
margin-bottom: 40rpx;
}
.no-text {
font-size: 16px;
color: #ccc;
display: block;
}
4. tabBarページ
これでログページが完成しましたが、その入り口はどこにありますか？心配しないでください。ホームページをtabBarページに変更します。
app.json
"tabBar": {
"color": "#666666",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "答题"
},
{
"pagePath": "pages/logs/logs",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "记录"
}
]
}
まず、app.jsonでtabBarパラメータを設定します。画像は、ページと同じレベルの画像フォルダに配置されます。
index.jsではwx.switchTab、tabBarページにジャンプします。
// index.js
bindViewTap: function() {
wx.switchTab({
url: '../home/home'
})
}
効果
Giteeソースコードアドレス
終わり。