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 @@ ...@@ -9,13 +9,14 @@
> >
<swiper-item v-for="(item, index) in swiperList" :key="index"> <swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="u-flex subject"> <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"> <view class="content">
<answer-sheet <answer-sheet
ref="answerSheet" ref="answerSheet"
:answerList="item.answerList" :answerList="item.answerList"
:rightKey="item.rightKey" :rightKey="item.rightKey"
:multiple="item.type === 3" :multiple="item.type === 3"
:submitStatus="item.submitStatus"
@change="answerChange" @change="answerChange"
></answer-sheet> ></answer-sheet>
</view> </view>
...@@ -132,7 +133,6 @@ export default { ...@@ -132,7 +133,6 @@ export default {
swiperChange: function (e) { swiperChange: function (e) {
let current = e.detail.current let current = e.detail.current
let lastIndex = this.swiperIndex let lastIndex = this.swiperIndex
console.log("本次：" + current + "上次：" + lastIndex)
let currentItem = this.swiperList[current] let currentItem = this.swiperList[current]
let info = {} let info = {}
info.source = e.detail.source info.source = e.detail.source
...@@ -145,7 +145,10 @@ export default { ...@@ -145,7 +145,10 @@ export default {
if (currentItem == null) { if (currentItem == null) {
info.current = NO_NEXT_PAGE info.current = NO_NEXT_PAGE
this.$emit("change", info) this.$emit("change", info)
this.swiperCurrent = lastIndex this.swiperCurrent = lastIndex - 1
this.$nextTick(() => {
this.swiperCurrent = lastIndex
})
return return
} }
this.$set(this.swiperList, this.getNextSwiperChangeIndex(current), this.getNextSwiperNeedItem(currentItem, this.list)) this.$set(this.swiperList, this.getNextSwiperChangeIndex(current), this.getNextSwiperNeedItem(currentItem, this.list))
...@@ -159,7 +162,10 @@ export default { ...@@ -159,7 +162,10 @@ export default {
if (currentItem == null) { if (currentItem == null) {
info.current = NO_PREV_PAGE info.current = NO_PREV_PAGE
this.$emit("change", info) this.$emit("change", info)
this.swiperCurrent = lastIndex this.swiperCurrent = lastIndex + 1
this.$nextTick(() => {
this.swiperCurrent = lastIndex
})
return return
} }
this.$set(this.swiperList, this.getLastSwiperChangeIndex(current), this.getLastSwiperNeedItem(currentItem, this.list)) this.$set(this.swiperList, this.getLastSwiperChangeIndex(current), this.getLastSwiperNeedItem(currentItem, this.list))
...@@ -182,7 +188,6 @@ export default { ...@@ -182,7 +188,6 @@ export default {
swiperList[current] = currentItem swiperList[current] = currentItem
swiperList[this.getLastSwiperChangeIndex(current)] = this.getLastSwiperNeedItem(currentItem, list) swiperList[this.getLastSwiperChangeIndex(current)] = this.getLastSwiperNeedItem(currentItem, list)
swiperList[this.getNextSwiperChangeIndex(current)] = this.getNextSwiperNeedItem(currentItem, list) swiperList[this.getNextSwiperChangeIndex(current)] = this.getNextSwiperNeedItem(currentItem, list)
console.log("初始化swiperList", swiperList)
return swiperList; return swiperList;
}, },
/** /**
......
src/pages/learn/answer.vue
View file @ 9edfccdd
...@@ -10,60 +10,26 @@ ...@@ -10,60 +10,26 @@
></u-navbar> ></u-navbar>
<view class="head" v-if="type !== 3"> <view class="head" v-if="type !== 3">
<view class="u-flex tab" v-if="type === 1"> <view class="u-flex tab" v-if="type === 1">
<view <view :class="['tab-list', {'active': model === 1}]" @click="changeModel(1)">答题模式</view>
:class="['tab-list', { active: model === 1 }]" <view :class="['tab-list', {'active': model === 2}]" @click="changeModel(2)">学习模式</view>
@click="changeModel(1)"
>答题模式</view
>
<view
:class="['tab-list', { active: model === 2 }]"
@click="changeModel(2)"
>学习模式</view
>
</view> </view>
<view class="u-flex count-down" v-if="type === 2"> <view class="u-flex count-down" v-if="type === 2">
<view <view>倒计时：<u-count-down :timestamp="timestamp" bg-color="" :show-hours="false"></u-count-down></view>
>倒计时：<u-count-down
:timestamp="timestamp"
bg-color=""
:show-hours="false"
></u-count-down
></view>
</view> </view>
</view> </view>
<view class="swiper"> <view class="swiper">
<page-swiper <swiper-limited-load
ref="pageSwiper" ref="swiper"
:dataLength="dataLength" :swiperHeight="500"
:initIndex="index" :swiperDuration="swiperDuration"
@swiperChange="swiperChange" :list="list"
@endChange="endChange" :current="current"
style="flex: 1;" :type="type"
:model="model"
@answerChange="answerChange"
@change="swiperChange"
> >
<view class="u-flex subject"> </swiper-limited-load>
<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>
<view class="u-flex u-row-around bottom"> <view class="u-flex u-row-around bottom">
<view class="u-flex"> <view class="u-flex">
...@@ -73,11 +39,7 @@ ...@@ -73,11 +39,7 @@
</view> </view>
</view> </view>
<view class="u-flex"> <view class="u-flex">
<view <view class="c-list" v-if="type === 1 || type === 3" @click="collection">
class="c-list"
v-if="type === 1 || type === 3"
@click="collection"
>
<u-icon name="star" color="#5A6073" size="40"></u-icon> <u-icon name="star" color="#5A6073" size="40"></u-icon>
<text>收藏</text> <text>收藏</text>
</view> </view>
...@@ -90,7 +52,7 @@ ...@@ -90,7 +52,7 @@
<answer-operation-tips :show.sync="show" /> <answer-operation-tips :show.sync="show" />
<answer-complete-pop <answer-complete-pop
:numberList="[1, 2, 3]" :numberList="result"
type="fail" type="fail"
:visible.sync="visible" :visible.sync="visible"
@cancel="visible = false" @cancel="visible = false"
...@@ -104,33 +66,30 @@ ...@@ -104,33 +66,30 @@
import swiperLimitedLoad from '@/components/swiper-limited-load/index.vue' import swiperLimitedLoad from '@/components/swiper-limited-load/index.vue'
import answerOperationTips from '@/components/answer-operation-tips/index.vue' import answerOperationTips from '@/components/answer-operation-tips/index.vue'
import answerCompletePop from '@/components/answer-complete-pop/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() const app = getApp()
export default { export default {
components: { components: {
swiperLimitedLoad, swiperLimitedLoad,
answerOperationTips, answerOperationTips,
answerCompletePop, answerCompletePop,
pageSwiper,
answerSheet,
answerExplanation,
}, },
data() { data() {
return { return {
visible: false, visible: false,
show: false, show: false,
// 1 练习 2 考试 3 每日一练 4 错题记录 5 收藏记录 // 1 练习 2 考试 3 每日一练 4 错题记录 5 收藏记录
type: 1, type: 1,
// 1 答题模式 2 学习模式 // 1 答题模式 2 学习模式
model: 1, model: 1,
timestamp: 60 * 60, timestamp: 60 * 60,
list: [], list: [],
index: 0, current: 0,
dataLength: 0, currentIndex: 0,
titleType: ['单选题', '判断题', '多选题'], swiperDuration: '0',
result: [1, 2, 3]
} }
}, },
computed: {}, computed: {},
...@@ -216,7 +175,8 @@ export default { ...@@ -216,7 +175,8 @@ export default {
}, },
], ],
answer: 'B', answer: 'B',
explain: '测试内容测试内容测试内容测试内容测试内容测试内容', explain:
'测试内容测试内容测试内容测试内容测试内容测试内容',
index: 3, index: 3,
rightKey: ['B'], rightKey: ['B'],
}, },
...@@ -225,66 +185,69 @@ export default { ...@@ -225,66 +185,69 @@ export default {
this.requestQuestionInfo(lists) this.requestQuestionInfo(lists)
}, },
methods: { methods: {
swiperChange(e) { requestQuestionInfo(lists) {
this.index = e // 初始化setData后，需要调用swiper组件的init方法
// 初始化checked confirm this.list = lists
this.list[e].answerList = this.list[e].answerList.map((v) => { this.$nextTick(() => {
if (!v.checked) v.checked = false // 比如上次答到了第20题
if (!v.confirm) v.confirm = false this.$refs.swiper.init(0)
return v // 初始化后再把动画弄出来，否则初始的current不是0，界面会自动跳动到当前位置，体验不太好
this.swiperDuration = '250'
// 全局记一下list, 答题卡页暂时就直接用了
app.globalData.questionList = lists
}) })
}, },
endChange(type) { swiperChange(e) {
if (type === 'left') { let current = e.current
this.currentIndex = current
if (current == NO_PREV_PAGE) {
return uni.showToast({ return uni.showToast({
title: '已经是第一题了', title: '已经是第一题了',
icon: 'none', icon: 'none',
}) })
} else if (type === 'right') { }
if (current == NO_NEXT_PAGE) {
return uni.showToast({ return uni.showToast({
title: '已经是最后一题了', title: '已经是最后一题了',
icon: 'none', icon: 'none',
}) })
} }
}, },
requestQuestionInfo(lists) {
this.list = lists
this.dataLength = lists.length
app.globalData.questionList = lists
},
changeModel(i) { changeModel(i) {
this.model = i this.model = i
}, },
collection() { collection() {
console.log('收藏') console.log("this.list[this.currentIndex]", this.list[this.currentIndex])
console.log("收藏")
}, },
// 作答完毕 // 作答完毕
answerChange(status, lists) { answerChange(status, lists) {
// 保存答题状态 // 保存答题状态
this.$set(this.list[this.index], 'submitStatus', true) this.$set(this.list[this.currentIndex], 'submitStatus', lists)
this.$set(this.list[this.index], 'answerList', lists) this.$set(this.list[this.currentIndex], 'answerList', lists)
this.$set( this.$set(this.list[this.currentIndex], 'result', status)
this.list[this.index], this.$set(this.list[this.currentIndex], 'errShow', this.type === 2 ? true : status === 'fail')
'errShow',
this.type === 2 ? true : status === 'fail'
)
app.globalData.questionList = this.list app.globalData.questionList = this.list
// 如果回答错误或者是考试模式，自动进入下一题 // 如果回答错误或者是考试模式，自动进入下一题
if (status === 'pass' || this.type === 2) { if (status === 'pass' || this.type === 2) {
if (this.index + 1 === this.list.length) return if (this.currentIndex + 1 > this.list.length - 1) {
this.index++ return
this.$refs.pageSwiper.swiperTo(this.index) }
this.current = this.currentIndex + 1
} }
}, },
// 交卷 // 交卷
handPapers() { 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 this.visible = true
console.log('交卷')
}, },
// 提前交卷 // 提前交卷
submit() { submit() {
console.log('提前交卷') console.log("提前交卷")
}, }
}, },
} }
</script> </script>
...@@ -300,64 +263,31 @@ export default { ...@@ -300,64 +263,31 @@ export default {
width: 100%; width: 100%;
height: 90rpx; height: 90rpx;
.tab { .tab {
margin: 10rpx auto; margin:10rpx auto;
border: 2rpx solid #2953ff; border: 2rpx solid #2953FF;
border-radius: 10rpx; border-radius: 10rpx;
width: 300rpx; width: 300rpx;
.tab-list { .tab-list {
flex: 1; flex: 1;
padding: 10rpx 25rpx; padding: 10rpx 25rpx;
font-size: 24rpx; font-size: 24rpx;
color: #191c27; color: #191C27;
} }
.active { .active {
background: #2953ff; background: #2953FF;
color: #fff; color: #fff;
} }
} }
.count-down { .count-down {
color: #5a6073; color: #5A6073;
font-size: 32rpx; font-size: 32rpx;
margin: 10rpx auto; margin:10rpx auto;
width: 230rpx; width: 230rpx;
} }
} }
.swiper { .swiper {
width: 100%; 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 { .bottom {
width: 100%; width: 100%;
......
src/pages/learn/answerBackup.vue
View file @ 9edfccdd
...@@ -10,26 +10,60 @@ ...@@ -10,26 +10,60 @@
></u-navbar> ></u-navbar>
<view class="head" v-if="type !== 3"> <view class="head" v-if="type !== 3">
<view class="u-flex tab" v-if="type === 1"> <view class="u-flex tab" v-if="type === 1">
<view :class="['tab-list', {'active': model === 1}]" @click="changeModel(1)">答题模式</view> <view
<view :class="['tab-list', {'active': model === 2}]" @click="changeModel(2)">学习模式</view> :class="['tab-list', { active: model === 1 }]"
@click="changeModel(1)"
>答题模式</view
>
<view
:class="['tab-list', { active: model === 2 }]"
@click="changeModel(2)"
>学习模式</view
>
</view> </view>
<view class="u-flex count-down" v-if="type === 2"> <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> </view>
<view class="swiper"> <view class="swiper">
<swiper-limited-load <page-swiper
ref="swiper" ref="pageSwiper"
:swiperHeight="500" :dataLength="dataLength"
:swiperDuration="swiperDuration" :initIndex="index"
:list="list" @swiperChange="swiperChange"
:current="current" @endChange="endChange"
:type="type" style="flex: 1;"
:model="model"
@answerChange="answerChange"
@change="swiperChange"
> >
</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>
<view class="u-flex u-row-around bottom"> <view class="u-flex u-row-around bottom">
<view class="u-flex"> <view class="u-flex">
...@@ -39,7 +73,11 @@ ...@@ -39,7 +73,11 @@
</view> </view>
</view> </view>
<view class="u-flex"> <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> <u-icon name="star" color="#5A6073" size="40"></u-icon>
<text>收藏</text> <text>收藏</text>
</view> </view>
...@@ -66,29 +104,33 @@ ...@@ -66,29 +104,33 @@
import swiperLimitedLoad from '@/components/swiper-limited-load/index.vue' import swiperLimitedLoad from '@/components/swiper-limited-load/index.vue'
import answerOperationTips from '@/components/answer-operation-tips/index.vue' import answerOperationTips from '@/components/answer-operation-tips/index.vue'
import answerCompletePop from '@/components/answer-complete-pop/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() const app = getApp()
export default { export default {
components: { components: {
swiperLimitedLoad, swiperLimitedLoad,
answerOperationTips, answerOperationTips,
answerCompletePop, answerCompletePop,
pageSwiper,
answerSheet,
answerExplanation,
}, },
data() { data() {
return { return {
visible: false, visible: false,
show: false, show: false,
// 1 练习 2 考试 3 每日一练 // 1 练习 2 考试 3 每日一练 4 错题记录 5 收藏记录
type: 1, type: 1,
// 1 答题模式 2 学习模式 // 1 答题模式 2 学习模式
model: 1, model: 1,
timestamp: 60 * 60, timestamp: 60 * 60,
list: [], list: [],
current: 0, index: 0,
currentIndex: 0, dataLength: 0,
swiperDuration: '0', titleType: ['单选题', '判断题', '多选题'],
} }
}, },
computed: {}, computed: {},
...@@ -174,8 +216,7 @@ export default { ...@@ -174,8 +216,7 @@ export default {
}, },
], ],
answer: 'B', answer: 'B',
explain: explain: '测试内容测试内容测试内容测试内容测试内容测试内容',
'测试内容测试内容测试内容测试内容测试内容测试内容',
index: 3, index: 3,
rightKey: ['B'], rightKey: ['B'],
}, },
...@@ -184,67 +225,66 @@ export default { ...@@ -184,67 +225,66 @@ export default {
this.requestQuestionInfo(lists) this.requestQuestionInfo(lists)
}, },
methods: { methods: {
requestQuestionInfo(lists) { swiperChange(e) {
// 初始化setData后，需要调用swiper组件的init方法 this.index = e
this.list = lists // 初始化checked confirm
this.$nextTick(() => { this.list[e].answerList = this.list[e].answerList.map((v) => {
// 比如上次答到了第20题 if (!v.checked) v.checked = false
this.$refs.swiper.init(0) if (!v.confirm) v.confirm = false
// 初始化后再把动画弄出来，否则初始的current不是0，界面会自动跳动到当前位置，体验不太好 return v
this.swiperDuration = '250'
// 全局记一下list, 答题卡页暂时就直接用了
app.globalData.questionList = lists
}) })
}, },
swiperChange(e) { endChange(type) {
let current = e.current if (type === 'left') {
this.currentIndex = current return uni.showToast({
if (current == NO_PREV_PAGE) {
uni.showToast({
title: '已经是第一题了', title: '已经是第一题了',
icon: 'none', icon: 'none',
}) })
return } else if (type === 'right') {
} return uni.showToast({
title: '已经是最后一题了',
if (current == NO_NEXT_PAGE) { icon: 'none',
uni.showModal({
title: '提示',
content: '您已经答完所有题，是否退出？',
}) })
return
} }
}, },
requestQuestionInfo(lists) {
this.list = lists
this.dataLength = lists.length
app.globalData.questionList = lists
},
changeModel(i) { changeModel(i) {
this.model = i this.model = i
}, },
collection() { collection() {
console.log("this.list[this.currentIndex]", this.list[this.currentIndex]) console.log('收藏')
console.log("收藏")
}, },
// 作答完毕 // 作答完毕
answerChange(status, lists) { answerChange(status, lists) {
// 保存答题状态 // 保存答题状态
this.$set(this.list[this.currentIndex], 'answerList', lists) this.$set(this.list[this.index], 'submitStatus', true)
this.$set(this.list[this.currentIndex], 'errShow', this.type === 2 ? true : status === 'fail') 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 app.globalData.questionList = this.list
// 如果回答错误或者是考试模式，自动进入下一题 // 如果回答错误或者是考试模式，自动进入下一题
if (status === 'pass' || this.type === 2) { if (status === 'pass' || this.type === 2) {
if (this.currentIndex + 1 > this.list.length - 1) { if (this.index + 1 === this.list.length) return
return this.index++
} this.$refs.pageSwiper.swiperTo(this.index)
this.current = this.currentIndex + 1
} }
}, },
// 交卷 // 交卷
handPapers() { handPapers() {
this.visible = true this.visible = true
console.log("交卷") console.log('交卷')
}, },
// 提前交卷 // 提前交卷
submit() { submit() {
console.log("提前交卷") console.log('提前交卷')
} },
}, },
} }
</script> </script>
...@@ -260,31 +300,64 @@ export default { ...@@ -260,31 +300,64 @@ export default {
width: 100%; width: 100%;
height: 90rpx; height: 90rpx;
.tab { .tab {
margin:10rpx auto; margin: 10rpx auto;
border: 2rpx solid #2953FF; border: 2rpx solid #2953ff;
border-radius: 10rpx; border-radius: 10rpx;
width: 300rpx; width: 300rpx;
.tab-list { .tab-list {
flex: 1; flex: 1;
padding: 10rpx 25rpx; padding: 10rpx 25rpx;
font-size: 24rpx; font-size: 24rpx;
color: #191C27; color: #191c27;
} }
.active { .active {
background: #2953FF; background: #2953ff;
color: #fff; color: #fff;
} }
} }
.count-down { .count-down {
color: #5A6073; color: #5a6073;
font-size: 32rpx; font-size: 32rpx;
margin:10rpx auto; margin: 10rpx auto;
width: 230rpx; width: 230rpx;
} }
} }
.swiper { .swiper {
width: 100%; 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 { .bottom {
width: 100%; 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