test.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <view class="container">
  3. <view class="progress">
  4. 进度: {{ currentQuestionIndex + 1 }}/{{ questions.length }}
  5. </view>
  6. <scroll-view
  7. scroll-y
  8. :scroll-top="scrollTop"
  9. scroll-with-animation
  10. class="scroll-view"
  11. :style="{height: scrollHeight + 'px'}"
  12. >
  13. <view
  14. v-for="(item, index) in questions"
  15. :key="item.id"
  16. class="question-item"
  17. :id="'question-' + index"
  18. >
  19. <view class="question">{{ item.question }}</view>
  20. <view
  21. v-for="option in item.options"
  22. :key="option.value"
  23. class="option"
  24. @click="selectAnswer(index, option.value)"
  25. :class="{ 'selected': selectedAnswers[index] === option.value }"
  26. >
  27. {{ option.label }}
  28. </view>
  29. <button
  30. v-if="index === questions.length - 1 && selectedAnswers[index]"
  31. class="submit-btn"
  32. @click="submit"
  33. >
  34. 提交
  35. </button>
  36. </view>
  37. </scroll-view>
  38. </view>
  39. </template>
  40. <script>
  41. export default {
  42. data() {
  43. return {
  44. questions: [
  45. { id: 1, question: "问题1", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  46. { id: 2, question: "问题2", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  47. { id: 3, question: "问题3", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  48. { id: 4, question: "问题4", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  49. { id: 5, question: "问题5", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  50. { id: 6, question: "问题6", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  51. { id: 7, question: "问题7", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  52. { id: 8, question: "问题8", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  53. { id: 9, question: "问题9", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  54. { id: 10, question: "问题10", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  55. { id: 11, question: "问题11", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  56. { id: 12, question: "问题12", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  57. { id: 13, question: "问题13", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  58. { id: 14, question: "问题14", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
  59. // 更多问题...
  60. ],
  61. selectedAnswers: [],
  62. scrollTop: 0,
  63. currentQuestionIndex: 0,
  64. scrollHeight: 0,
  65. scrollDelay: 500,
  66. questionPositions: [] // 用于存储每个问题的位置
  67. }
  68. },
  69. onLoad() {
  70. const res = uni.getSystemInfoSync();
  71. this.scrollHeight = res.windowHeight;
  72. // 延迟一下,确保DOM已经渲染
  73. setTimeout(() => {
  74. this.calculateQuestionPositions();
  75. }, 300);
  76. },
  77. methods: {
  78. selectAnswer(index, value) {
  79. this.$set(this.selectedAnswers, index, value);
  80. if (index < this.questions.length - 1) {
  81. setTimeout(() => {
  82. this.currentQuestionIndex = index + 1;
  83. this.scrollToQuestion(this.currentQuestionIndex);
  84. }, this.scrollDelay);
  85. } else {
  86. setTimeout(() => {
  87. this.scrollToBottom();
  88. }, this.scrollDelay);
  89. }
  90. },
  91. goToNext(index) {
  92. if (index < this.questions.length - 1) {
  93. this.currentQuestionIndex = index + 1;
  94. this.scrollToQuestion(this.currentQuestionIndex);
  95. }
  96. },
  97. calculateQuestionPositions() {
  98. uni.createSelectorQuery()
  99. .selectAll('.question-item')
  100. .boundingClientRect(rects => {
  101. if (rects) {
  102. let accumulatedHeight = 0;
  103. this.questionPositions = rects.map(rect => {
  104. accumulatedHeight += rect.height;
  105. return accumulatedHeight - rect.height;
  106. });
  107. }
  108. })
  109. .exec();
  110. },
  111. scrollToQuestion(index) {
  112. if (this.questionPositions[index] !== undefined) {
  113. this.scrollTop = this.questionPositions[index];
  114. }
  115. },
  116. scrollToBottom() {
  117. const lastIndex = this.questions.length - 1;
  118. if (this.questionPositions[lastIndex] !== undefined) {
  119. this.scrollTop = this.questionPositions[lastIndex] + 200; // 额外滚动以显示提交按钮
  120. }
  121. },
  122. submit() {
  123. uni.showToast({
  124. title: '提交成功',
  125. icon: 'success'
  126. });
  127. // 这里可以添加提交逻辑
  128. }
  129. }
  130. }
  131. </script>
  132. <style>
  133. .container {
  134. position: relative;
  135. background-color: #f5f5f5;
  136. }
  137. .progress {
  138. position: fixed;
  139. top: 10px;
  140. right: 10px;
  141. background: rgba(0,0,0,0.5);
  142. color: white;
  143. padding: 5px 10px;
  144. border-radius: 10px;
  145. font-size: 12px;
  146. z-index: 100;
  147. }
  148. .scroll-view {
  149. width: 100%;
  150. }
  151. .question-item {
  152. /* min-height: 100vh; */
  153. padding: 20px;
  154. box-sizing: border-box;
  155. display: flex;
  156. flex-direction: column;
  157. justify-content: flex-start;
  158. background-color: #f5f5f5;
  159. }
  160. .question {
  161. font-size: 16px;
  162. margin-bottom: 20px;
  163. color: #333;
  164. }
  165. .option {
  166. padding: 15px;
  167. margin: 10px 0;
  168. border: 1px solid #eee;
  169. border-radius: 5px;
  170. background-color: #fff;
  171. color: #333;
  172. }
  173. .option.selected {
  174. background-color: #f0f0f0;
  175. border-color: #007AFF;
  176. }
  177. .submit-btn {
  178. margin-top: 20px;
  179. background-color: #4F4FFF;
  180. color: white;
  181. border-radius: 5px;
  182. font-size: 14px;
  183. width: 80px;
  184. height: 36px;
  185. line-height: 36px;
  186. text-align: center;
  187. align-self: flex-end;
  188. }
  189. </style>