Skip to content

S
study
Commit 6fa64e18 authored by Damon's avatar Damon
Browse files
Options

feat: 滚动方案备份

parent c814ffbb
Hide whitespace changes
Inline Side-by-side
Showing with 315 additions and 2 deletions
src/pages.json
View file @ 6fa64e18
...@@ -58,6 +58,16 @@ ...@@ -58,6 +58,16 @@
"disableScroll": true "disableScroll": true
} }
}, },
{
"path": "answerBackup",
"name": "learnAnswerrBackup",
"style": {
"navigationBarTitleText": "答题-备份",
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{ {
"path": "detail", "path": "detail",
"name": "learnDetail", "name": "learnDetail",
......
src/pages/learn/answer.vue
View file @ 6fa64e18
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</view> </view>
</view> </view>
<!-- <answer-operation-tips :show.sync="show" /> <answer-operation-tips :show.sync="show" />
<answer-complete-pop <answer-complete-pop
:numberList="[1, 2, 3]" :numberList="[1, 2, 3]"
type="fail" type="fail"
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
@cancel="visible = false" @cancel="visible = false"
@submit="submit" @submit="submit"
> >
</answer-complete-pop> --> </answer-complete-pop>
</view> </view>
</template> </template>
......
src/pages/learn/answerBackup.vue 0 → 100644
View file @ 6fa64e18
<template>
<view class="u-flex answer">
<u-navbar
back-icon-color="#333333"
background="transparent"
titleColor="#191C27"
:border-bottom="false"
title="答题"
title-bold
></u-navbar>
<view class="head" v-if="type !== 3">
<view class="u-flex tab" v-if="type === 1">
<view :class="['tab-list', {'active': model === 1}]" @click="changeModel(1)">答题模式</view>
<view :class="['tab-list', {'active': model === 2}]" @click="changeModel(2)">学习模式</view>
</view>
<view class="u-flex count-down" v-if="type === 2">
<view>倒计时：<u-count-down :timestamp="timestamp" bg-color="" :show-hours="false"></u-count-down></view>
</view>
</view>
<view class="swiper">
<swiper-limited-load
ref="swiper"
:swiperHeight="500"
:swiperDuration="swiperDuration"
:list="list"
:current="current"
:type="type"
:model="model"
@answerChange="answerChange"
@change="swiperChange"
>
</swiper-limited-load>
</view>
<view class="u-flex u-row-around bottom">
<view class="u-flex">
<view class="c-list">
<u-icon name="grid" color="#5A6073" size="40"></u-icon>
<text>1/2887</text>
</view>
</view>
<view class="u-flex">
<view class="c-list" v-if="type === 1 || type === 3" @click="collection">
<u-icon name="star" color="#5A6073" size="40"></u-icon>
<text>收藏</text>
</view>
<view class="c-list" v-if="type === 2" @click="handPapers">
<u-icon name="file-text" color="#5A6073" size="40"></u-icon>
<text>交卷</text>
</view>
</view>
</view>
<answer-operation-tips :show.sync="show" />
<answer-complete-pop
:numberList="[1, 2, 3]"
type="fail"
:visible.sync="visible"
@cancel="visible = false"
@submit="submit"
>
</answer-complete-pop>
</view>
</template>
<script>
import swiperLimitedLoad from '@/components/swiper-limited-load/index.vue'
import answerOperationTips from '@/components/answer-operation-tips/index.vue'
import answerCompletePop from '@/components/answer-complete-pop/index.vue'
const NO_PREV_PAGE = -1
const NO_NEXT_PAGE = -2
const app = getApp()
export default {
components: {
swiperLimitedLoad,
answerOperationTips,
answerCompletePop,
},
data() {
return {
visible: false,
show: false,
// 1 练习 2 考试 3 每日一练
type: 1,
// 1 答题模式 2 学习模式
model: 1,
timestamp: 60 * 60,
list: [],
current: 0,
currentIndex: 0,
swiperDuration: '0',
}
},
computed: {},
created() {
const lists = [
{
type: 1,
title: '采用QS1电桥测量tanδ的接线方式一般有差接线及和接线。',
answerList: [
{
sort: 'A',
text: '正确',
},
{
sort: 'B',
text: '错误',
},
],
answer: 'A',
explain:
'极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 0,
rightKey: ['A'],
},
{
type: 2,
title:
'空气间隙的操作冲击击穿电压数值大小不仅与间隙距离、电极形状、电极极性有关,而且与操作冲击电压波的波前时间的长短有关。',
answerList: [
{
sort: 'A',
text: '正确',
},
{
sort: 'B',
text: '错误',
},
],
answer: 'B',
explain:
'极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 1,
rightKey: ['B'],
},
{
type: 3,
title: '西林电桥采用正接线及反接线时,其测试原理相同',
answerList: [
{
sort: 'A',
text: '影响',
},
{
sort: 'B',
text: '影响很小',
},
{
sort: 'C',
text: '影响很大',
},
{
sort: 'D',
text: '无影响',
},
],
answer: 'B，C',
explain:
'双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。',
index: 2,
rightKey: ['B', 'C'],
},
{
type: 2,
title: '测试标题测试标题测试标题测试标题',
answerList: [
{
sort: 'A',
text: '是',
},
{
sort: 'B',
text: '否',
},
],
answer: 'B',
explain:
'测试内容测试内容测试内容测试内容测试内容测试内容',
index: 3,
rightKey: ['B'],
},
]
this.requestQuestionInfo(lists)
},
methods: {
requestQuestionInfo(lists) {
// 初始化setData后，需要调用swiper组件的init方法
this.list = lists
this.$nextTick(() => {
// 比如上次答到了第20题
this.$refs.swiper.init(0)
// 初始化后再把动画弄出来，否则初始的current不是0，界面会自动跳动到当前位置，体验不太好
this.swiperDuration = '250'
// 全局记一下list, 答题卡页暂时就直接用了
app.globalData.questionList = lists
})
},
swiperChange(e) {
let current = e.current
this.currentIndex = current
if (current == NO_PREV_PAGE) {
uni.showToast({
title: '已经是第一题了',
icon: 'none',
})
return
}
if (current == NO_NEXT_PAGE) {
uni.showModal({
title: '提示',
content: '您已经答完所有题，是否退出？',
})
return
}
},
changeModel(i) {
this.model = i
},
collection() {
console.log("this.list[this.currentIndex]", this.list[this.currentIndex])
console.log("收藏")
},
// 作答完毕
answerChange(status, lists) {
// 保存答题状态
this.$set(this.list[this.currentIndex], 'answerList', lists)
this.$set(this.list[this.currentIndex], 'errShow', this.type === 2 ? true : status === 'fail')
app.globalData.questionList = this.list
// 如果回答错误或者是考试模式，自动进入下一题
if (status === 'pass' || this.type === 2) {
if (this.currentIndex + 1 > this.list.length - 1) {
return
}
this.current = this.currentIndex + 1
}
},
// 交卷
handPapers() {
this.visible = true
console.log("交卷")
},
// 提前交卷
submit() {
console.log("提前交卷")
}
},
}
</script>
<style lang="scss" scoped>
.answer {
height: 100vh;
flex-direction: column;
background-color: #f8fafd;
background-image: linear-gradient(to top, #f8fafd 0%, #e9f3ff 50%);
background-size: 100% 520rpx;
background-repeat: no-repeat;
.head {
width: 100%;
height: 90rpx;
.tab {
margin:10rpx auto;
border: 2rpx solid #2953FF;
border-radius: 10rpx;
width: 300rpx;
.tab-list {
flex: 1;
padding: 10rpx 25rpx;
font-size: 24rpx;
color: #191C27;
}
.active {
background: #2953FF;
color: #fff;
}
}
.count-down {
color: #5A6073;
font-size: 32rpx;
margin:10rpx auto;
width: 230rpx;
}
}
.swiper {
width: 100%;
flex: 1;
}
.bottom {
width: 100%;
height: 150rpx;
border-top: 2rpx solid #ccc;
color: #5a6073;
font-size: 28rpx;
.c-list {
display: flex;
text {
padding-left: 10rpx;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment