index.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view>
  3. <uni-icons type="left" size="30"></uni-icons>
  4. <text>单元测试</text>
  5. <view><text>{{count}}</text>/<text>{{total}}</text></view>
  6. </view>
  7. <swiper class="swiper-box" @change="onChange" @animationfinish="onAnimationfinish" :current="current">
  8. <swiper-item v-for="(item ,index) in list" :key="index">
  9. <view class="swiper-item">
  10. {{item}}
  11. </view>
  12. </swiper-item>
  13. </swiper>
  14. <button class="transition-button" v-if="!isLast" type="primary" @click="nextQuestion">next</button>
  15. <button class="transition-button" v-if="!isFirst" type="primary" @click="prevQuestion">prev</button>
  16. <button class="transition-button" v-if="isLast" type="primary" @click="handleSubmit">submit</button>
  17. </template>
  18. <script setup>
  19. import {
  20. useExam
  21. } from './useUnit';
  22. import {
  23. ref,
  24. onMounted
  25. } from "vue";
  26. const {
  27. isFirst,
  28. isLast,
  29. count,
  30. total,
  31. current,
  32. list,
  33. rightAnswer,
  34. wrongAnswer,
  35. jifen,
  36. nextQuestion,
  37. prevQuestion,
  38. handleSubmit,
  39. initPage
  40. } = useExam();
  41. // swiper change 回调
  42. function onChange(e) {
  43. current.value = e.detail.current;
  44. }
  45. // 查看答案
  46. function checkAnswer() {}
  47. // 继续学习
  48. function goStudyContinue() {}
  49. </script>
  50. <style lang="scss" scoped>
  51. .swiper-box {
  52. height: 200px;
  53. }
  54. .swiper-item {
  55. display: flex;
  56. flex-direction: column;
  57. justify-content: center;
  58. align-items: center;
  59. height: 200px;
  60. }
  61. </style>