摘要:做题区域自动补全剩下的高度代码如下时间转换的函数由秒转换的格式时间转换测试网址点我跳转手机打开或浏览器仿真仓库地址链接有用记得点个星扫码也可以上几张效果图
实现功能:
题目的加载
文章的上下滑动
做题模式
做题内容区域的上下滑动动态调整做题区域
左右滑动切换题目
计时功能
提交限制功能
字体大小调节
背景颜色调节
网络错误提示窗
做题选中逻辑
首先遇到的问题是做题区域与文章区域上下滑动的问题
怎样才能自适应屏幕呢
首先在 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/...
扫码也可以
上几张效果图
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93416.html
摘要:做题区域自动补全剩下的高度代码如下时间转换的函数由秒转换的格式时间转换测试网址点我跳转手机打开或浏览器仿真仓库地址链接有用记得点个星扫码也可以上几张效果图 实现功能: 题目的加载 文章的上下滑动 做题模式 做题内容区域的上下滑动动态调整做题区域 左右滑动切换题目 计时功能 提交限制功能 字体大小调节 背景颜色调节 网络错误提示窗 做题选中逻辑 首先遇到的问题是做题区域与文章区域上下...
阅读 1824·2021-11-23 09:51
阅读 1219·2019-08-30 15:55
阅读 1588·2019-08-30 15:44
阅读 734·2019-08-30 14:11
阅读 1115·2019-08-30 14:10
阅读 880·2019-08-30 13:52
阅读 2606·2019-08-30 12:50
阅读 588·2019-08-29 15:04