【页面案例汇总】微信小程序题库页面

最新推荐文章于 2024-08-13 00:02:05 发布

米饭，℡

最新推荐文章于 2024-08-13 00:02:05 发布

阅读量166

点赞数

分类专栏：页面案例文章标签：微信小程序小程序

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

版权

页面案例专栏收录该内容

24 篇文章 0 订阅

订阅专栏

在uniapp的pages文件夹中创建一个名为questionBank的文件夹。
在questionBank文件夹中创建一个名为questionBank.vue的文件。
在questionBank.vue文件中添加以下代码：

<template>
  <view class="question-bank">
    <view class="header">
      <text class="title">题库</text>
      <button class="add-question-btn" @tap="addQuestion">添加题目</button>
    </view>
    <scroll-view class="question-list" scroll-y>
      <view v-for="(item, index) in questionList" :key="index" class="question-item" @tap="goToQuestionDetail(index)">
        <text class="question-title">{{ item.title }}</text>
        <text class="question-type">{{ item.type }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questionList: [
        { title: "题目1", type: "单选题" },
        { title: "题目2", type: "多选题" },
        { title: "题目3", type: "判断题" }
      ]
    };
  },
  methods: {
    addQuestion() {
      // 跳转到添加题目页面
    },
    goToQuestionDetail(index) {
      // 跳转到题目详情页面并传递当前题目的索引
    }
  }
};
</script>

<style lang="scss">
.question-bank {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60rpx;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #e5e5e5;
    box-sizing: border-box;
    .title {
      font-size: 32rpx;
      font-weight: bold;
    }
    .add-question-btn {
      font-size: 28rpx;
      color: #007aff;
    }
  }
  .question-list {
    height: calc(100vh - 60rpx);
    padding: 20rpx;
    box-sizing: border-box;
    .question-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      height: 150rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      .question-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      .question-type {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}
</style>

在这个页面中，我们展示了一个题目列表，每道题目有题目内容和题目类型两个信息。我们还添加了一个按钮，点击它可以跳转到添加题目的页面。点击题目列表中的某一项，可以跳转到题目详情页面并传递当前题目的索引。

实际应用中需要根据具体业务需求进行修改。