【页面案例汇总】微信小程序答题历史页面

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

<template>
  <view class="container">
    <view class="title">答题历史</view>
    <view v-if="history.length === 0">暂无记录</view>
    <view v-else class="table">
      <view class="row header">
        <view class="cell">序号</view>
        <view class="cell">题目</view>
        <view class="cell">答案</view>
        <view class="cell">是否正确</view>
        <view class="cell">答题时间</view>
      </view>
      <view v-for="(item, index) in history" class="row">
        <view class="cell">{{index + 1}}</view>
        <view class="cell">{{item.question}}</view>
        <view class="cell">{{item.answer}}</view>
        <view class="cell">{{item.isCorrect?'是':'否'}}</view>
        <view class="cell">{{formatTime(item.timestamp)}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      history: [
        {
          question: '1 + 1 = ?',
          answer: '2',
          isCorrect: true,
          timestamp: 1609430400000, // 2021/1/1 00:00:00的时间戳
        },
        {
          question: '2 * 3 = ?',
          answer: '5',
          isCorrect: false,
          timestamp: 1609516800000, // 2021/1/2 00:00:00的时间戳
        },
        {
          question: '3 / 2 = ?',
          answer: '1.5',
          isCorrect: true,
          timestamp: 1609603200000, // 2021/1/3 00:00:00的时间戳
        },
      ],
    };
  },
  methods: {
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = this.addZero(date.getMonth() + 1);
      const day = this.addZero(date.getDate());
      const hour = this.addZero(date.getHours());
      const minute = this.addZero(date.getMinutes());
      const second = this.addZero(date.getSeconds());
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    addZero(num) {
      return num < 10 ? `0${num}` : num;
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.table {
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
.row {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.header {
  background-color: #f0f0f0;
  font-weight: bold;
}
.cell {
  flex: 1;
  padding: 10px;
  text-align: center;
}
</style>

在上述示例中，我们展示了一个答题历史页面，包括一个总标题、一个显示历史记录的表格。如果历史记录为空，会展示一条文字提示。表格中包含5列数据：序号、题目、答案、是否正确和答题时间。答题时间使用了formatTime方法来将时间戳转换为标准格式。