当前位置: 首页 > Web前端 > CSS

基于VUE搭建H5组件【附源码】

时间:2023-03-31 12:40:30 CSS

实现功能:加载题目,上下滑动文章,做题模式,上下滑动题目内容区域,动态调整题目区域,左右滑动切换题目计时功能,提交限制功能,调整字体大小,调整背景颜色,调整网络错误提示窗口,做题选逻辑。问题是问题区和文章区上下滑动时如何适配屏幕?首先在创建的函数中获取当前屏幕的高度this.clientHeight=document.documentElement.clientHeightthis.position=this.clientHeight/2this.positionEnd=this.clientHeight/2后来经过多方排查发现没有合适的分屏插件,所以决定自己写一个截图插件。总体思路如下。使用touch.js检测手指在屏幕上的滑动事件。做题区和文章展示区的高度变化,根据高度变化改变文章展示区的高度。问题区剩余高度自动补全代码如下onPanup(e){this.aniM=falseconsole.log(this.clientHeight-this.position)if(this.clientHeight-this.position<=200){这。position=this.clientHeight-200this.contentHeight=this.position+'px'returnfalse}else{this.position=e.deltaY+this.positionEndthis.contentHeight=this.position+'px'letchild=document.getElementsByClassName('setHeight')if(this.examStatus){for(vari=0;i{this.startTime()},1000)},//时间转换timeTrans(val){letf=parseInt(val/60)letm=val%60if(f<10){f='0'+f}if(m<10){m='0'+m}this.time.f=fthis.time.m=m}点我跳转到测试网址(手机打开或浏览器模拟)github仓库地址git链接https://github.com/fanshyiis/...有用记得点个starhttps://www.enjoyreading.net/...也可以扫码看几张效果图