Skip to content

S
study
Commit 9edfccdd authored by Damon's avatar Damon
Browse files
Options

refactor: 答题滚动两种方案完善

parent 6fa64e18
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 204 deletions
src/components/swiper-limited-load/index.vue
View file @ 9edfccdd
......@@ -9,13 +9,14 @@
>
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="u-flex subject">
<view class="title"><text>{{ titleType[item.type - 1] }}</text>{{ item.title }}</view>
<view class="title" v-if="item.title"><text>{{ titleType[item.type - 1] }}</text>{{ item.title }}</view>
<view class="content">
<answer-sheet
ref="answerSheet"
:answerList="item.answerList"
:rightKey="item.rightKey"
:multiple="item.type === 3"
:submitStatus="item.submitStatus"
@change="answerChange"
></answer-sheet>
</view>
......@@ -132,7 +133,6 @@ export default {
swiperChange: function (e) {
let current = e.detail.current
let lastIndex = this.swiperIndex
console.log("本次：" + current + "上次：" + lastIndex)
let currentItem = this.swiperList[current]
let info = {}
info.source = e.detail.source
......@@ -145,7 +145,10 @@ export default {
if (currentItem == null) {
info.current = NO_NEXT_PAGE
this.$emit("change", info)
this.swiperCurrent = lastIndex
this.swiperCurrent = lastIndex - 1
this.$nextTick(() => {
this.swiperCurrent = lastIndex
})
return
}
this.$set(this.swiperList, this.getNextSwiperChangeIndex(current), this.getNextSwiperNeedItem(currentItem, this.list))
......@@ -159,7 +162,10 @@ export default {
if (currentItem == null) {
info.current = NO_PREV_PAGE
this.$emit("change", info)
this.swiperCurrent = lastIndex
this.swiperCurrent = lastIndex + 1
this.$nextTick(() => {
this.swiperCurrent = lastIndex
})
return
}
this.$set(this.swiperList, this.getLastSwiperChangeIndex(current), this.getLastSwiperNeedItem(currentItem, this.list))
......@@ -182,7 +188,6 @@ export default {
swiperList[current] = currentItem
swiperList[this.getLastSwiperChangeIndex(current)] = this.getLastSwiperNeedItem(currentItem, list)
swiperList[this.getNextSwiperChangeIndex(current)] = this.getNextSwiperNeedItem(currentItem, list)
console.log("初始化swiperList", swiperList)
return swiperList;
},
/**
......
src/pages/learn/answer.vue
View file @ 9edfccdd
......@@ -10,60 +10,26 @@
></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 :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>倒计时：<u-count-down :timestamp="timestamp" bg-color="" :show-hours="false"></u-count-down></view>
</view>
</view>
<view class="swiper">
<page-swiper
ref="pageSwiper"
:dataLength="dataLength"
:initIndex="index"
@swiperChange="swiperChange"
@endChange="endChange"
style="flex: 1;"
<swiper-limited-load
ref="swiper"
:swiperHeight="500"
:swiperDuration="swiperDuration"
:list="list"
:current="current"
:type="type"
:model="model"
@answerChange="answerChange"
@change="swiperChange"
>
<view class="u-flex subject">
<view class="title"
><text>{{ titleType[list[index].type - 1] }}</text
>{{ list[index].title }}</view
>
<view class="content">
<answer-sheet
ref="answerSheet"
:answerList="list[index].answerList"
:rightKey="list[index].rightKey"
:multiple="list[index].type === 3"
:submitStatus="list[index].submitStatus"
@change="answerChange"
></answer-sheet>
</view>
<view class="explain">
<answer-explanation
v-show="model === 2 || list[index].errShow"
:answer="list[index].answer"
:explain="list[index].explain"
></answer-explanation>
</view>
</view>
</page-swiper>
</swiper-limited-load>
</view>
<view class="u-flex u-row-around bottom">
<view class="u-flex">
......@@ -73,11 +39,7 @@
</view>
</view>
<view class="u-flex">
<view
class="c-list"
v-if="type === 1 || type === 3"
@click="collection"
>
<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>
......@@ -90,7 +52,7 @@
<answer-operation-tips :show.sync="show" />
<answer-complete-pop
:numberList="[1, 2, 3]"
:numberList="result"
type="fail"
:visible.sync="visible"
@cancel="visible = false"
......@@ -104,33 +66,30 @@
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'
import pageSwiper from '@/components/page-swiper/index.vue'
import answerSheet from '@/components/answer-sheet/index.vue'
import answerExplanation from '@/components/answer-explanation/index.vue'
const NO_PREV_PAGE = -1
const NO_NEXT_PAGE = -2
const app = getApp()
export default {
components: {
swiperLimitedLoad,
answerOperationTips,
answerCompletePop,
pageSwiper,
answerSheet,
answerExplanation,
},
data() {
return {
visible: false,
show: false,
// 1 练习 2 考试 3 每日一练 4 错题记录 5 收藏记录
type: 1,
type: 1,
// 1 答题模式 2 学习模式
model: 1,
timestamp: 60 * 60,
list: [],
index: 0,
dataLength: 0,
titleType: ['单选题', '判断题', '多选题'],
current: 0,
currentIndex: 0,
swiperDuration: '0',
result: [1, 2, 3]
}
},
computed: {},
......@@ -216,7 +175,8 @@ export default {
},
],
answer: 'B',
explain: '测试内容测试内容测试内容测试内容测试内容测试内容',
explain:
'测试内容测试内容测试内容测试内容测试内容测试内容',
index: 3,
rightKey: ['B'],
},
......@@ -225,66 +185,69 @@ export default {
this.requestQuestionInfo(lists)
},
methods: {
swiperChange(e) {
this.index = e
// 初始化checked confirm
this.list[e].answerList = this.list[e].answerList.map((v) => {
if (!v.checked) v.checked = false
if (!v.confirm) v.confirm = false
return v
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
})
},
endChange(type) {
if (type === 'left') {
swiperChange(e) {
let current = e.current
this.currentIndex = current
if (current == NO_PREV_PAGE) {
return uni.showToast({
title: '已经是第一题了',
icon: 'none',
})
} else if (type === 'right') {
}
if (current == NO_NEXT_PAGE) {
return uni.showToast({
title: '已经是最后一题了',
icon: 'none',
})
}
},
requestQuestionInfo(lists) {
this.list = lists
this.dataLength = lists.length
app.globalData.questionList = lists
},
changeModel(i) {
this.model = i
},
collection() {
console.log('收藏')
console.log("this.list[this.currentIndex]", this.list[this.currentIndex])
console.log("收藏")
},
// 作答完毕
answerChange(status, lists) {
// 保存答题状态
this.$set(this.list[this.index], 'submitStatus', true)
this.$set(this.list[this.index], 'answerList', lists)
this.$set(
this.list[this.index],
'errShow',
this.type === 2 ? true : status === 'fail'
)
this.$set(this.list[this.currentIndex], 'submitStatus', lists)
this.$set(this.list[this.currentIndex], 'answerList', lists)
this.$set(this.list[this.currentIndex], 'result', status)
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.index + 1 === this.list.length) return
this.index++
this.$refs.pageSwiper.swiperTo(this.index)
if (this.currentIndex + 1 > this.list.length - 1) {
return
}
this.current = this.currentIndex + 1
}
},
// 交卷
handPapers() {
const fail = this.list.filter(v => v.result === 'fail').length
const noStart = this.list.filter(v => !v.result).length
this.result = [fail, noStart, 0]
this.visible = true
console.log('交卷')
},
// 提前交卷
submit() {
console.log('提前交卷')
},
console.log("提前交卷")
}
},
}
</script>
......@@ -300,64 +263,31 @@ export default {
width: 100%;
height: 90rpx;
.tab {
margin: 10rpx auto;
border: 2rpx solid #2953ff;
margin:10rpx auto;
border: 2rpx solid #2953FF;
border-radius: 10rpx;
width: 300rpx;
.tab-list {
flex: 1;
padding: 10rpx 25rpx;
font-size: 24rpx;
color: #191c27;
color: #191C27;
}
.active {
background: #2953ff;
background: #2953FF;
color: #fff;
}
}
.count-down {
color: #5a6073;
color: #5A6073;
font-size: 32rpx;
margin: 10rpx auto;
margin:10rpx auto;
width: 230rpx;
}
}
.swiper {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
.subject {
flex-flow: column;
padding: 20rpx;
.type {
width: 100%;
text-align: left;
padding: 20rpx 0;
}
.title {
color: #191c27;
font-size: 32rpx;
line-height: 50rpx;
font-weight: bold;
width: 100%;
text-align: left;
text {
background: #9ea5bb;
color: #fff;
padding: 8rpx 20rpx;
margin-right: 10rpx;
font-size: 20rpx;
border-radius: 50rpx;
}
}
.content,
.explain,
.btn {
width: 100%;
padding-top: 50rpx;
}
}
flex: 1;
}
.bottom {
width: 100%;
......
src/pages/learn/answerBackup.vue
View file @ 9edfccdd
......@@ -10,26 +10,60 @@
></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
: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
>倒计时：<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"
<page-swiper
ref="pageSwiper"
:dataLength="dataLength"
:initIndex="index"
@swiperChange="swiperChange"
@endChange="endChange"
style="flex: 1;"
>
</swiper-limited-load>
<view class="u-flex subject">
<view class="title"
><text>{{ titleType[list[index].type - 1] }}</text
>{{ list[index].title }}</view
>
<view class="content">
<answer-sheet
ref="answerSheet"
:answerList="list[index].answerList"
:rightKey="list[index].rightKey"
:multiple="list[index].type === 3"
:submitStatus="list[index].submitStatus"
@change="answerChange"
></answer-sheet>
</view>
<view class="explain">
<answer-explanation
v-show="model === 2 || list[index].errShow"
:answer="list[index].answer"
:explain="list[index].explain"
></answer-explanation>
</view>
</view>
</page-swiper>
</view>
<view class="u-flex u-row-around bottom">
<view class="u-flex">
......@@ -39,7 +73,11 @@
</view>
</view>
<view class="u-flex">
<view class="c-list" v-if="type === 1 || type === 3" @click="collection">
<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>
......@@ -66,29 +104,33 @@
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'
import pageSwiper from '@/components/page-swiper/index.vue'
import answerSheet from '@/components/answer-sheet/index.vue'
import answerExplanation from '@/components/answer-explanation/index.vue'
const NO_PREV_PAGE = -1
const NO_NEXT_PAGE = -2
const app = getApp()
export default {
components: {
swiperLimitedLoad,
answerOperationTips,
answerCompletePop,
pageSwiper,
answerSheet,
answerExplanation,
},
data() {
return {
visible: false,
show: false,
// 1 练习 2 考试 3 每日一练
type: 1,
// 1 练习 2 考试 3 每日一练 4 错题记录 5 收藏记录
type: 1,
// 1 答题模式 2 学习模式
model: 1,
timestamp: 60 * 60,
list: [],
current: 0,
currentIndex: 0,
swiperDuration: '0',
index: 0,
dataLength: 0,
titleType: ['单选题', '判断题', '多选题'],
}
},
computed: {},
......@@ -174,8 +216,7 @@ export default {
},
],
answer: 'B',
explain:
'测试内容测试内容测试内容测试内容测试内容测试内容',
explain: '测试内容测试内容测试内容测试内容测试内容测试内容',
index: 3,
rightKey: ['B'],
},
......@@ -184,67 +225,66 @@ export default {
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) {
this.index = e
// 初始化checked confirm
this.list[e].answerList = this.list[e].answerList.map((v) => {
if (!v.checked) v.checked = false
if (!v.confirm) v.confirm = false
return v
})
},
swiperChange(e) {
let current = e.current
this.currentIndex = current
if (current == NO_PREV_PAGE) {
uni.showToast({
endChange(type) {
if (type === 'left') {
return uni.showToast({
title: '已经是第一题了',
icon: 'none',
})
return
}
if (current == NO_NEXT_PAGE) {
uni.showModal({
title: '提示',
content: '您已经答完所有题，是否退出？',
} else if (type === 'right') {
return uni.showToast({
title: '已经是最后一题了',
icon: 'none',
})
return
}
},
requestQuestionInfo(lists) {
this.list = lists
this.dataLength = lists.length
app.globalData.questionList = lists
},
changeModel(i) {
this.model = i
},
collection() {
console.log("this.list[this.currentIndex]", this.list[this.currentIndex])
console.log("收藏")
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')
this.$set(this.list[this.index], 'submitStatus', true)
this.$set(this.list[this.index], 'answerList', lists)
this.$set(
this.list[this.index],
'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
if (this.index + 1 === this.list.length) return
this.index++
this.$refs.pageSwiper.swiperTo(this.index)
}
},
// 交卷
handPapers() {
this.visible = true
console.log("交卷")
console.log('交卷')
},
// 提前交卷
submit() {
console.log("提前交卷")
}
console.log('提前交卷')
},
},
}
</script>
......@@ -260,31 +300,64 @@ export default {
width: 100%;
height: 90rpx;
.tab {
margin:10rpx auto;
border: 2rpx solid #2953FF;
margin: 10rpx auto;
border: 2rpx solid #2953ff;
border-radius: 10rpx;
width: 300rpx;
.tab-list {
flex: 1;
padding: 10rpx 25rpx;
font-size: 24rpx;
color: #191C27;
color: #191c27;
}
.active {
background: #2953FF;
background: #2953ff;
color: #fff;
}
}
.count-down {
color: #5A6073;
color: #5a6073;
font-size: 32rpx;
margin:10rpx auto;
margin: 10rpx auto;
width: 230rpx;
}
}
.swiper {
width: 100%;
flex: 1;
flex: 1;
display: flex;
flex-direction: column;
.subject {
flex-flow: column;
padding: 20rpx;
.type {
width: 100%;
text-align: left;
padding: 20rpx 0;
}
.title {
color: #191c27;
font-size: 32rpx;
line-height: 50rpx;
font-weight: bold;
width: 100%;
text-align: left;
text {
background: #9ea5bb;
color: #fff;
padding: 8rpx 20rpx;
margin-right: 10rpx;
font-size: 20rpx;
border-radius: 50rpx;
}
}
.content,
.explain,
.btn {
width: 100%;
padding-top: 50rpx;
}
}
}
.bottom {
width: 100%;
......
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