国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

基于VUE構(gòu)建做題H5組件【附源代碼】

LiuRhoRamen / 3086人閱讀

摘要：做題區(qū)域自動(dòng)補(bǔ)全剩下的高度代碼如下時(shí)間轉(zhuǎn)換的函數(shù)由秒轉(zhuǎn)換的格式時(shí)間轉(zhuǎn)換測(cè)試網(wǎng)址點(diǎn)我跳轉(zhuǎn)手機(jī)打開(kāi)或?yàn)g覽器仿真?zhèn)}庫(kù)地址鏈接有用記得點(diǎn)個(gè)星掃碼也可以上幾張效果圖

實(shí)現(xiàn)功能：

題目的加載

文章的上下滑動(dòng)

做題模式

做題內(nèi)容區(qū)域的上下滑動(dòng)動(dòng)態(tài)調(diào)整做題區(qū)域

左右滑動(dòng)切換題目

計(jì)時(shí)功能

提交限制功能

字體大小調(diào)節(jié)

背景顏色調(diào)節(jié)

網(wǎng)絡(luò)錯(cuò)誤提示窗

做題選中邏輯

首先遇到的問(wèn)題是做題區(qū)域與文章區(qū)域上下滑動(dòng)的問(wèn)題
怎樣才能自適應(yīng)屏幕呢

首先在 created函數(shù)里，獲取當(dāng)前屏幕的高度

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

后來(lái)經(jīng)過(guò)多方面調(diào)研，發(fā)現(xiàn)沒(méi)有適合的分屏插件
于是決定自己寫(xiě)截屏插件

大體思路如下

利用touch.js來(lái)偵測(cè)手指在屏幕中的滑動(dòng)事件

根據(jù)獲得的參數(shù)，計(jì)算出做題區(qū)域與文章展示區(qū)域的高度變化

根據(jù)高度變化，改變文章顯示區(qū)域的高度。做題區(qū)域自動(dòng)補(bǔ)全剩下的高度

代碼如下

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
  }
},

時(shí)間轉(zhuǎn)換的函數(shù)
由秒轉(zhuǎn)換XX：XX的格式

startTime () {
        this.startTimeTop ++
        this.timeTrans(this.startTimeTop)
        setTimeout(() => {
          this.startTime()
        }, 1000)
      },

      // 時(shí)間轉(zhuǎn)換
      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
      },

測(cè)試網(wǎng)址點(diǎn)我跳轉(zhuǎn)（手機(jī)打開(kāi)或?yàn)g覽器仿真）

github倉(cāng)庫(kù)地址git鏈接

https://github.com/fanshyiis/...
有用記得點(diǎn)個(gè)星

https://www.enjoyreading.net/...

掃碼也可以

上幾張效果圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/93416.html

相關(guān)文章

  • 基于VUE構(gòu)建做題H5組件【附源代碼】

    摘要：做題區(qū)域自動(dòng)補(bǔ)全剩下的高度代碼如下時(shí)間轉(zhuǎn)換的函數(shù)由秒轉(zhuǎn)換的格式時(shí)間轉(zhuǎn)換測(cè)試網(wǎng)址點(diǎn)我跳轉(zhuǎn)手機(jī)打開(kāi)或?yàn)g覽器仿真?zhèn)}庫(kù)地址鏈接有用記得點(diǎn)個(gè)星掃碼也可以上幾張效果圖 實(shí)現(xiàn)功能： 題目的加載 文章的上下滑動(dòng) 做題模式 做題內(nèi)容區(qū)域的上下滑動(dòng)動(dòng)態(tài)調(diào)整做題區(qū)域 左右滑動(dòng)切換題目 計(jì)時(shí)功能 提交限制功能 字體大小調(diào)節(jié) 背景顏色調(diào)節(jié) 網(wǎng)絡(luò)錯(cuò)誤提示窗 做題選中邏輯 首先遇到的問(wèn)題是做題區(qū)域與文章區(qū)域上下...

    Darkgel 評(píng)論0 收藏0

  • 你不知道的h5

    摘要：目前，常用的模塊規(guī)范主要有兩種和。攔截全局請(qǐng)求一直接引入腳本攔截需要的回調(diào)或函數(shù)。深刻知道一個(gè)良好的命名規(guī)范的重要性，同時(shí)在項(xiàng)目中也會(huì)遇到一些命名的瓶頸。 基于 Three.js 的超快的 3D 開(kāi)發(fā)框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 應(yīng)用 3D 開(kāi)發(fā)框架。它為普通的 Three.js 任務(wù)提供封裝、使搭建環(huán)境、...

    IntMain 評(píng)論0 收藏0

  • 前端資源收集整理

    摘要：工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關(guān)資源匯總 學(xué)習(xí)指導(dǎo) 精華文章 Web前端的路該怎么走？：文章超長(zhǎng)，但是干貨超級(jí)多，值得反復(fù)精讀！ 聽(tīng)說(shuō)2017你想寫(xiě)前端？：適合于已經(jīng)度過(guò)了小白階...

    awesome23 評(píng)論0 收藏0

  • 前端資源收集整理

    摘要：工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關(guān)資源匯總 學(xué)習(xí)指導(dǎo) 精華文章 Web前端的路該怎么走？：文章超長(zhǎng)，但是干貨超級(jí)多，值得反復(fù)精讀！ 聽(tīng)說(shuō)2017你想寫(xiě)前端？：適合于已經(jīng)度過(guò)了小白階...

    antyiwei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<