基於VUE構建作題H5組件【附源代碼】

實現功能：

1. 題目的加載
2. 文章的上下滑動
3. 作題模式
4. 作題內容區域的上下滑動動態調整作題區域
5. 左右滑動切換題目
6. 計時功能
7. 提交限制功能
8. 字體大小調節
9. 背景顏色調節
10. 網絡錯誤提示窗
11. 作題選中邏輯

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

首先在 created函數裏，獲取當前屏幕的高度

this.clientHeight = document.documentElement.clientHeight
      this.position = this.clientHeight / 2
      this.positionEnd = this.clientHeight / 2

後來通過多方面調研，發現沒有適合的分屏插件
因而決定本身寫截屏插件

大致思路以下

1. 利用touch.js來偵測手指在屏幕中的滑動事件
2. 根據得到的參數，計算出作題區域與文章展現區域的高度變化
3. 根據高度變化，改變文章顯示區域的高度。作題區域自動補全剩下的高度

代碼以下

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/...

掃碼也能夠

上幾張效果圖