实现功能:
- 题目的加载
- 文章的上下滑动
- 做题模式
- 做题内容区域的上下滑动动态调整做题区域
- 左右滑动切换题目
- 计时功能
- 提交限制功能
- 字体大小调节
- 背景颜色调节
- 网络错误提示窗
- 做题选中逻辑
首先遇到的问题是做题区域与文章区域上下滑动的问题
怎样才能自适应屏幕呢
首先在 created函数里,获取当前屏幕的高度
this.clientHeight = document.documentElement.clientHeight
this.position = this.clientHeight / 2
this.positionEnd = this.clientHeight / 2
后来经过多方面调研,发现没有适合的分屏插件
于是决定自己写截屏插件
大体思路如下
- 利用touch.js来侦测手指在屏幕中的滑动事件
- 根据获得的参数,计算出做题区域与文章展示区域的高度变化
- 根据高度变化,改变文章显示区域的高度。做题区域自动补全剩下的高度
代码如下
onPanup (e) {
this.aniM = false
console.log(this.clientHeight - this.position)
if (this.clientHeight - this.position <= 200) {
this.position = this.clientHeight - 200
this.contentHeight = this.position + 'px'
return false
} else {
this.position = e.deltaY + this.positionEnd
this.contentHeight = this.position + 'px'
let child = document.getElementsByClassName('setHeight')
if (this.examStatus) {
for (var i = 0; i < child.length; i++) {
child[i].setAttribute('style', 'padding-bottom:50px;height:' + (this.clientHeight - this.position - 100) + 'px')
}
} else {
for (var j = 0; j < child.length; j++) {
child[j].setAttribute('style', 'height:' + (this.clientHeight - this.position - 80) + 'px')
}
}
}
},
setH () {
let child = document.getElementsByClassName('setHeight')
if (this.examStatus) {
for (var i = 0; i < child.length; i++) {
child[i].setAttribute('style', 'padding-bottom:50px;height:' + (this.clientHeight - this.position - 100) + 'px')
}
} else {
for (var j = 0; j < child.length; j++) {
child[j].setAttribute('style', 'height:' + (this.clientHeight - this.position - 80) + 'px')
}
}
},
onPanend (e) {
if (this.clientHeight - this.position <= 200) {
this.position = this.clientHeight - 201
this.positionEnd = this.clientHeight - 201
} else {
this.positionEnd = this.positionEnd + e.deltaY
}
},
时间转换的函数
由秒转换XX:XX的格式
startTime () {
this.startTimeTop ++
this.timeTrans(this.startTimeTop)
setTimeout(() => {
this.startTime()
}, 1000)
},
// 时间转换
timeTrans (val) {
let f = parseInt(val / 60)
let m = val % 60
if (f < 10) {
f = '0' + f
}
if (m < 10) {
m = '0' + m
}
this.time.f = f
this.time.m = m
},
测试网址点我跳转(手机打开或浏览器仿真)
github仓库地址git链接
https://github.com/fanshyiis/...
有用记得点个星
https://www.enjoyreading.net/...
扫码也可以
上几张效果图