123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- <template>
- <view class="container">
- <view class="progress">
- 进度: {{ currentQuestionIndex + 1 }}/{{ questions.length }}
- </view>
- <scroll-view
- scroll-y
- :scroll-top="scrollTop"
- scroll-with-animation
- class="scroll-view"
- :style="{height: scrollHeight + 'px'}"
- >
- <view
- v-for="(item, index) in questions"
- :key="item.id"
- class="question-item"
- :id="'question-' + index"
- >
- <view class="question">{{ item.question }}</view>
- <view
- v-for="option in item.options"
- :key="option.value"
- class="option"
- @click="selectAnswer(index, option.value)"
- :class="{ 'selected': selectedAnswers[index] === option.value }"
- >
- {{ option.label }}
- </view>
- <button
- v-if="index === questions.length - 1 && selectedAnswers[index]"
- class="submit-btn"
- @click="submit"
- >
- 提交
- </button>
- </view>
- </scroll-view>
- </view>
- </template>
-
- <script>
- export default {
- data() {
- return {
- questions: [
- { id: 1, question: "问题1", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 2, question: "问题2", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 3, question: "问题3", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 4, question: "问题4", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 5, question: "问题5", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 6, question: "问题6", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 7, question: "问题7", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 8, question: "问题8", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 9, question: "问题9", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 10, question: "问题10", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 11, question: "问题11", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 12, question: "问题12", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 13, question: "问题13", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- { id: 14, question: "问题14", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
- // 更多问题...
- ],
- selectedAnswers: [],
- scrollTop: 0,
- currentQuestionIndex: 0,
- scrollHeight: 0,
- scrollDelay: 500,
- questionPositions: [] // 用于存储每个问题的位置
- }
- },
- onLoad() {
- const res = uni.getSystemInfoSync();
- this.scrollHeight = res.windowHeight;
-
- // 延迟一下,确保DOM已经渲染
- setTimeout(() => {
- this.calculateQuestionPositions();
- }, 300);
- },
- methods: {
- selectAnswer(index, value) {
- this.$set(this.selectedAnswers, index, value);
-
- if (index < this.questions.length - 1) {
- setTimeout(() => {
- this.currentQuestionIndex = index + 1;
- this.scrollToQuestion(this.currentQuestionIndex);
- }, this.scrollDelay);
- } else {
- setTimeout(() => {
- this.scrollToBottom();
- }, this.scrollDelay);
- }
- },
- goToNext(index) {
- if (index < this.questions.length - 1) {
- this.currentQuestionIndex = index + 1;
- this.scrollToQuestion(this.currentQuestionIndex);
- }
- },
- calculateQuestionPositions() {
- uni.createSelectorQuery()
- .selectAll('.question-item')
- .boundingClientRect(rects => {
- if (rects) {
- let accumulatedHeight = 0;
- this.questionPositions = rects.map(rect => {
- accumulatedHeight += rect.height;
- return accumulatedHeight - rect.height;
- });
- }
- })
- .exec();
- },
- scrollToQuestion(index) {
- if (this.questionPositions[index] !== undefined) {
- this.scrollTop = this.questionPositions[index];
- }
- },
- scrollToBottom() {
- const lastIndex = this.questions.length - 1;
- if (this.questionPositions[lastIndex] !== undefined) {
- this.scrollTop = this.questionPositions[lastIndex] + 200; // 额外滚动以显示提交按钮
- }
- },
- submit() {
- uni.showToast({
- title: '提交成功',
- icon: 'success'
- });
- // 这里可以添加提交逻辑
- }
- }
- }
- </script>
-
- <style>
- .container {
- position: relative;
- background-color: #f5f5f5;
- }
-
- .progress {
- position: fixed;
- top: 10px;
- right: 10px;
- background: rgba(0,0,0,0.5);
- color: white;
- padding: 5px 10px;
- border-radius: 10px;
- font-size: 12px;
- z-index: 100;
- }
-
- .scroll-view {
- width: 100%;
- }
-
- .question-item {
- /* min-height: 100vh; */
- padding: 20px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- background-color: #f5f5f5;
- }
-
- .question {
- font-size: 16px;
- margin-bottom: 20px;
- color: #333;
- }
-
- .option {
- padding: 15px;
- margin: 10px 0;
- border: 1px solid #eee;
- border-radius: 5px;
- background-color: #fff;
- color: #333;
- }
-
- .option.selected {
- background-color: #f0f0f0;
- border-color: #007AFF;
- }
-
- .submit-btn {
- margin-top: 20px;
- background-color: #4F4FFF;
- color: white;
- border-radius: 5px;
- font-size: 14px;
- width: 80px;
- height: 36px;
- line-height: 36px;
- text-align: center;
- align-self: flex-end;
- }
- </style>
|