【页面案例汇总】微信小程序答题记录页面

本文链接：https://blog.csdn.net/weixin_42317757/article/details/134257746

本文介绍了如何在微信小程序中创建一个答题记录页面，包括使用Vue.js构建页面结构，添加答题记录功能，以及清空记录的方法。展示了`<template>`、`<script>`和`<style>`部分的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【页面案例汇总】微信小程序答题记录页面：

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