vue页面渲染慢——类似分页加载

1.png 2.png 3.png

案例：试卷题目
一次加载完100或者更多的题目时 会导致页面渲染过慢/出现一些异常
解决：
可以把题目分开加载

 changeModel(val) {
      if (val == 1) {
        this.questionList = [this.questionNumList[this.nowIndex]]
      }
      if (val == 2) {
        this.questionList = []
        this.pageLoading = true
        this.setList()
        // this.questionList = this.questionNumList
      }
    },
    setList() {
      let length = this.questionNumList.length - this.questionList.length
      if (length == 0) {
        this.pageLoading = false
        return
      }
      if (length > 20) {
        let list = this.questionNumList.slice(
          this.questionList.length,
          this.questionList.length + 20
        )
        for (let i = 0; i < list.length; i++) {
          this.questionList.push(list[i])
        }
        setTimeout(() => {
          this.setList()
        }, 100)
        return
      }

      let list = this.questionNumList.slice(
        this.questionList.length,
        this.questionList.length + length
      )
      for (let i = 0; i < list.length; i++) {
        this.questionList.push(list[i])
      }
      this.pageLoading = false
    }