基于VUE构建做题H5组件【附源代码】

LiuRhoRamen 发布于2019-08-22 15:22 / 3054人阅读

摘要：做题区域自动补全剩下的高度代码如下时间转换的函数由秒转换的格式时间转换测试网址点我跳转手机打开或浏览器仿真仓库地址链接有用记得点个星扫码也可以上几张效果图

实现功能：

题目的加载

文章的上下滑动

做题模式

做题内容区域的上下滑动动态调整做题区域

左右滑动切换题目

计时功能

提交限制功能

字体大小调节

背景颜色调节

网络错误提示窗

做题选中逻辑

首先遇到的问题是做题区域与文章区域上下滑动的问题
怎样才能自适应屏幕呢

首先在 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/...

扫码也可以

上几张效果图

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93416.html

基于VUE构建做题H5组件【附源代码】

摘要：做题区域自动补全剩下的高度代码如下时间转换的函数由秒转换的格式时间转换测试网址点我跳转手机打开或浏览器仿真仓库地址链接有用记得点个星扫码也可以上几张效果图实现功能：题目的加载文章的上下滑动做题模式做题内容区域的上下滑动动态调整做题区域左右滑动切换题目计时功能提交限制功能字体大小调节背景颜色调节网络错误提示窗做题选中逻辑首先遇到的问题是做题区域与文章区域上下...

Darkgel 2019-08-30 14:07 评论0 收藏0
你不知道的h5

摘要：目前，常用的模块规范主要有两种和。拦截全局请求一直接引入脚本拦截需要的回调或函数。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。基于 Three.js 的超快的 3D 开发框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、...

IntMain 2019-08-21 17:57 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

antyiwei 2019-08-29 13:03 评论0 收藏0