【页面案例汇总】微信小程序答题记录页面:
<template>
<view class="container">
<view class="header">
<text class="title">答题记录</text>
</view>
<scroll-view class="list" scroll-y>
<view v-for="(record, index) in records" :key="index" class="item">
<text class="question">{{record.question}}</text>
<view class="answer">
<text>你的答案:</text>
<text>{{record.answer}}</text>
</view>
<view class="answer">
<text>正确答案:</text>
<text>{{record.correct}}</text>
</view>
</view>
</scroll-view>
<view class="footer">
<button class="button" type="primary" @click="clearRecords">清空记录</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
records: [], // 存储答题记录的数组
};
},
methods: {
// 添加答题记录
addRecord(question, answer, correct) {
this.records.push({
question,
answer,
correct,
});
},
// 清空答题记录
clearRecords() {
this.records = [];
},
},
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
padding: 20px;
background-color: #f5f5f5;
text-align: center;
}
.title {
font-size: 24px;
}
.list {
flex: 1;
padding: 20px;
}
.item {
margin-bottom: 10px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 5px;
}
.question {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.answer {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.footer {
padding: 10px 20px;
}
.button {
width: 100%;
}
</style>
在主页面中进行答题时,可以在选项被选择时调用 addRecord
方法添加答题记录。例如:
<template>
<view class="container">
<!-- 省略其他代码 -->
<view class="question">{{question}}</view>
<view class="options">
<view v-for="(option, index) in options" :key="index" @click="selectOption(option)">
<text>{{option}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
// 省略其他代码
methods: {
// 选择选项
selectOption(selected) {
if (selected === this.correct) {
// 答案正确时添加记录
this.addRecord(this.question, selected, this.correct);
}
// 省略其他代码
},
},
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.question {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.options {
display: flex;
flex-wrap: wrap;
}
.options view {
margin-right: 10px;
margin-bottom: 10px;
padding: 5px 10px;
background-color: #f5f5f5;
border-radius: 5px;
}
.options view.active {
background-color: #4caf50;
color: #fff;
}
</style>
通过在答题记录页面调用 clearRecords
方法,可以清空所有的答题记录。例如:
<template>
<view class="container">
<!-- 省略其他代码 -->
<view class="footer">
<button class="button" type="primary" @click="clearRecords">清空记录</button>
</view>
</view>
</template>
<script>
export default {
// 省略其他代码
methods: {
// 清空答题记录
clearRecords() {
this.records = [];
},
},
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.footer {
padding: 10px 20px;
}
.button {
width: 100%;
}
</style>