基于VUE構建做題H5組件【附源代碼】

Darkgel 發布于2019-08-30 14:07 / 1707人閱讀

摘要：做題區域自動補全剩下的高度代碼如下時間轉換的函數由秒轉換的格式時間轉換測試網址點我跳轉手機打開或瀏覽器仿真倉庫地址鏈接有用記得點個星掃碼也可以上幾張效果圖

實現功能：

題目的加載

文章的上下滑動

做題模式

做題內容區域的上下滑動動態調整做題區域

左右滑動切換題目

計時功能

提交限制功能

字體大小調節

背景顏色調節

網絡錯誤提示窗

做題選中邏輯

首先遇到的問題是做題區域與文章區域上下滑動的問題
怎樣才能自適應屏幕呢

首先在 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輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115789.html

基于VUE構建做題H5組件【附源代碼】

摘要：做題區域自動補全剩下的高度代碼如下時間轉換的函數由秒轉換的格式時間轉換測試網址點我跳轉手機打開或瀏覽器仿真倉庫地址鏈接有用記得點個星掃碼也可以上幾張效果圖實現功能：題目的加載文章的上下滑動做題模式做題內容區域的上下滑動動態調整做題區域左右滑動切換題目計時功能提交限制功能字體大小調節背景顏色調節網絡錯誤提示窗做題選中邏輯首先遇到的問題是做題區域與文章區域上下...

LiuRhoRamen 2019-08-22 15:22 評論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