dvcp_v2_wechat_app/src/project/qujing/AppLegalLearning/testForm.vue

<template>
  <div class="testForm">
    <u-navbar title="法治学习" :background="backgroundNavbar"></u-navbar>
    <div class="type">
      <div class="type_left">单选题</div>
      <div><span class="col_blue">{{ activeIndex + 1 }}</span>/{{questionList.length}}</div>
    </div>
      <div v-for="(item,index) in questionList" :key="index">
        <div v-if="activeIndex === index">
          <div>{{ item.subject }}</div>
          
        </div>
      </div>
    <div class="btn" @click="next" v-if="activeIndex < questionList.length - 1">下一题</div>
  </div>
</template>

<script>
export default {
  customNavigation: true,
  data() {
    return {
      backgroundNavbar: {
        // background: "url('./img/navbar.png') no-repeat",
        backgroundSize: '100% 100%',
      },
      activeIndex: 0,
      questionList: [
        {
          index: 0,
          subject: "第1题",
          answer: "答案",
          jiexi: '解析'
        },
        {
          index: 1,
          subject: "第2题",
          answer: "答案",
          jiexi: '解析'
        },
        {
          index: 2,
          subject: "第3题",
          answer: "答案",
          jiexi: '解析'
        },
        {
          index: 3,
          subject: "第4题",
          answer: "答案",
          jiexi: '解析'
        },
        {
          index: 4,
          subject: "第5题",
          answer: "答案",
          jiexi: '解析'
        }
      ]
    }
  },
  methods: {
    getList() {
      console.log('题目列表');
    },
    next() {
      this.activeIndex ++;
    },
    touchStart() {},
    touchEnd() {},
  },
  onReachBottom() {
    this.current ++;
  },
}
</script>

<style lang="scss" scoped>
.testForm {
  // background: url("./img/bg.png") no-repeat;

  .type {
    display: flex;
    justify-content: space-between;
    padding: 0 32px;
    margin-top: 80px;
    box-sizing: border-box;
    font-size: 28px;
    color: #333333;

    .type_left {
      font-weight: 600;
    }

    .col_blue {
      color: #2D7DFF;
    }

  }

  .btn {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: 0;
    width: 320px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    background: #2D7DFF;
    border-radius: 44px;
  }
}
</style>