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 class="topic">
      <div v-for="(item,index) in questionList" :key="index" >
        <div v-if="activeIndex === index">
          <!-- 题目 -->
          <div>{{ item.subject }}</div>
          <!-- 单选 -->
          <div class="answer_list">
            <div class="answer_item error">
              {{ options[index] }}: {{ item.answer}}
            </div>
          </div>
          <!-- 多选 -->
          <!-- <div class="answer_list">
            <div class="answer_item error">
              {{ options[index] }}: {{ item.answer}}
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="type mar-top">
      <div class="type_left">答案解析</div>
    </div>
    <div class="topic mar-top">
      <div><span>正确答案：</span></div>
      <div>获悉，党的十八大以来，曲靖市深入学习贯彻习近平新时代中国特色社会主义思想，坚持以习近平法治思想为根本遵循和行动指南。</div>
    </div>
    <div class="btn" @click="nextTopic" v-if="activeIndex < questionList.length - 1">下一题</div>
    <div class="btn" @click="confirm">确定</div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  customNavigation: true,
  data() {
    return {
      backgroundNavbar: {
        // background: "url('./img/navbar.png') no-repeat",
        // backgroundSize: '100% 100%',
      },
      
      options: ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
      questionList: [
        {
          index: 0,
          subject: "共产党成立年份是？",
          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: '解析'
        }
      ],
      startX: 0, // 滑动开始x轴位置
      moveX: 0, // 滑动的x轴距离
      activeIndex: 0, // 当前第几题
      newIndex: 0, // 滑动到第几题
      list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
      createdTime: '', // 开始答题时间
      endTime: '', // 结束时间
    }
  },
  methods: {
    onSwiper() {
      console.log(e);
    },
    onSlideChange(o) {
      console.log(o);
    },
    getList() {
      console.log('题目列表');
    },
    nextTopic() {
      this.activeIndex ++;
    },
    touchStart(e) {
      this.startX = e.changedTouches[0].pageX
      console.log('开始触摸：', this.startX);
    },
    touchEnd(e, index) { // 手指离开屏幕时触发
      // 获取滑动距离
      const moveX = e.changedTouches[0].pageX - this.startX
      // 判断滑动方向
      if (moveX < -100 && index < this.topic.length-1) {
        // 【下一题】 判断大幅度左滑且不是最后一题
          this.newIndex=this.newIndex+1
          this.activeIndex= this.activeIndex+1
          console.log('第'+this.index+'题');
      }
      else if (moveX > 100 && index!= 0) { 
          // 【上一题】 判断大幅度右滑且不是第一题
          this.newIndex=this.newIndex-1
          this.activeIndex=this.activeIndex-1
      }
    },
    confirm() {
      uni.navigateTo({url: './result'})
    },
  },
  onReachBottom() {
    this.current ++;
  },
  onLoad() {
    this.createdTime = Date.parse(new Date())
  }
}
</script>

<style lang="scss" scoped>
.testForm {
  // background: url("./img/bg.png") no-repeat;
  padding: 0 32px;
  margin-top: 80px;

  .type {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 28px;
    color: #333333;

    .type_left {
      font-weight: 600;
    }

    .col_blue {
      color: #2D7DFF;
    }

  }

  .topic {
    background: #FFF;
    margin-top: 32px;
    padding: 24px;
    margin-top: 80px;
    border-radius: 16px;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);

    .answer_list {
      margin-top: 32px;

      .answer_item {
        background: #FBFCFE;
        border: 1px solid #CCCCCC;
        border-radius: 16px;
        padding: 28px 24px;
        box-sizing: border-box;

        .myChoice {
          width: 136px;
          height: 48px;
          background: #FFFFFF;
          border: 1px solid #E23C3C;
          border-radius: 8px;
        }
      }

      .succeed {
        border: 2px solid #2D7EFE;
        color: #2D7DFF;
      }

      .error {
        border: 2px solid #E23C3C;
        color: #E23C3C;
      }
    }
  }

  .mar-top {
    margin-top: 32px;
  }

  .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;
    font-weight: 500;
    font-size: 34px;
    color: #FFFFFF;
  }
}
</style>