如何前端分页

前端分页

工作中，如果遇到后端的无理要求，怎么办？作为一名合格的攻城狮，还能怎么办，满足他（她）呗.
比如一次收到100条数据，像这样：
密密麻麻，这都什么玩意儿？
整理一下思路，顺手撸出以下干货：

    let that = this;
    let option = {
      courseId: options.courseId,
      chapterId: options.chapter_id
    }//以上为初始化加载参数
    app.encryption({//初始化加载函数获取所有题目
      url: api.default.getProblems,
      data: option,
      method: 'GET',
      dataType: "json",
      success: function (res) {
        console.log(res)
        let curtitle = res.list[0] //声明首次加载的题目
        let curindex = 0 //声明首次加载的下标
        let randerTitle = app.testWxParse(that,res.list[0])//初始化并解析第一道题目,默认是从第一道题开始加载渲染
        that.data.allRender.push(randerTitle)//allRender为所有已经渲染页面的数据集合
        for(let item of res.list.entries()){//遍历所有原始数据并初始化首次加载数据集合
          if( item[1].ProblemId == res.lastProblemId ){//如果发现了此lastProblemId则需要初始化所有之前的题目
              curtitle =  item[1]
              curindex =  item[0]//初始化加载下标
              console.log(curindex)
              randerTitle = app.testWxParse(that,curtitle)//初始化首次加载页面数据
              if(curindex>=1){
                let icon = 'tabItems[0].icon'
                that.setData({
                  [icon]: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/leftsing.png',
                })
              }
              that.data.allRender.length = 0
              for(let i = 0 ; i <= curindex; i ++){
                let randerTitle = app.testWxParse(that,res.list[i])//解析所有已经加载的题目,从第一道题开始
                that.data.allRender.push(randerTitle)//向页面渲染集合推送已做过的题目,
              }   
        }
      }//遍历所有题目并将上一次做过的题目找到，如果此前有记录，则需要把所有做过的题目推送到已经渲染的集合（即要初始化allRender）
        that.setData({
          originTitle: res.list,//为所有原始数据
          randerTitle: randerTitle,//为当前渲染数据
          current_no: curindex,//初始化题目标注
          ProblemType:randerTitle.ProblemType,//表明练习题类型
          all_current_no:res.count,//所有题目的数量
          singleNum:res.singleList,//单选题的数量
          multipleNum:res.multipleLis,//多选题的数量
          judgmentNum:res.judgmentList,//判断题的数量
          formId:res.formId//formid
        })
        if(randerTitle.yourAnswer && randerTitle.yourAnswer!= '' ){
            that.init(randerTitle.yourAnswer)
        }
      },
      fail: function (n) {
        console.log('初始化失败')
      }
    })

初始化后，进行切换页面并加载数据
向前切换

  lastQU() {
    let that = this
    let current_no = that.data.current_no//获取当前标题数
    let allRenders = that.data.allRender//获取所有已经渲染的数据
    console.log(allRenders)
    if(current_no < 1){//如果下标小于等于1则提示当前已经是第一题
      wx.showToast({
        title: '已经是第一题了',
        icon: 'none',
        duration: 2000
       })
      let icon = 'tabItems[0].icon'
      return
    }
    current_no = current_no - 1 //获取上一题的下标（局部）
    console.log(current_no)
    if(allRenders[current_no].isCollect && allRenders[current_no].isCollect == '1'){ //已收藏 
      that.setData({
        likes: true,
        [icon]: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/yishuangcang (1).png',
        [classes]: 'active',
        [name]: '已收藏'
      })
      }else{
        that.setData({
          likes: true,
          [icon]: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/weishoucang.png',
          [classes]: '',
          [name]: '收藏'
        })
      }
      console.log(allRenders[current_no])
      if(allRenders[current_no].done){
        that.setData({
          showAny:false
        })
      }else{
        that.setData({
          showAny:true
        })
      }
    this.setData({
      randerTitle: allRenders[current_no],
      current_no: current_no,
      answerImg:'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/hideAnswer.png',
      activeAnswer:'defaultAnswer',
      correctoption:'',
      multishowAny:true,
      ProblemType:allRenders[current_no].ProblemType
    })
    if(allRenders[current_no].yourAnswer && allRenders[current_no].yourAnswer!= '' ){ //如果改题目已经做过
      that.init(allRenders[current_no].yourAnswer)
  }
  },

向后切换

  nextQU() {
    console.log(this.data.current_no,this.data.all_current_no)
    if(this.data.current_no+1 >= this.data.all_current_no){
      wx.showToast({
        title: '已经是最后一题了',
        icon: 'none',
        duration: 2000
       })
      return
    }
    var that = this
    let randerTitle
    let current_no = that.data.current_no + 1
    let curReander = that.data.originTitle[current_no]//获取下一题的原始数据
    let allRender = that.data.allRender//页面已经渲染的数据集合
    console.log(curReander)
    let icon = 'tabItems[2].icon'
    let classes = 'tabItems[2].class'
    let name = 'tabItems[2].name'//以上为收藏按钮的数据
    if (!allRender.includes(curReander)) {//判断下一题的渲染数据是否已存在当前已经渲染的数据集合，如果不存在则添加并初始化状态
      allRender.push(curReander)
      // randerTitle = allRender[current_no]//初始化即将渲染的数据
      // console.log(randerTitle)
      //如果该数据没有解析则进行解析
      randerTitle = app.testWxParse(that, curReander)
      console.log(randerTitle)
      if (curReander.isCollect == '1') { //判断下一题是否已收藏 
        that.setData({
          [icon]: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/yishuangcang (1).png',
          [classes]: 'active',
          [name]: '已收藏'
        })
      } else {
        that.setData({
          [icon]: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/weishoucang.png',
          [classes]: '',
          [name]: '收藏'
        })
      }
      that.setData({
        randerTitle: randerTitle,//挂载页面
        current_no: current_no,//更新下标
        allRender: allRender,//更新已经渲染的数据
        showAny: true,//隐藏答案
        ProblemType: randerTitle.ProblemType,//更新题目类型
        answerImg: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/hideAnswer.png',
        activeAnswer: 'defaultAnswer',
        correctoption: '',
        multishowAny: true//
      })
    }else{//如果存在则直接拿取已存在的数据渲染
      let isShow
      randerTitle = allRender[current_no]
      if (randerTitle.done){
        isShow = false //如果当前题目已做，则展示答案
      }else{
        isShow = true //否则隐藏答案
      }
      if (randerTitle.isCollect == '1') { //判断下一题是否已收藏 
        that.setData({
          likes: true,
          [icon]: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/yishuangcang (1).png',
          [classes]: 'active',
          [name]: '已收藏'
        })
      } else {
        that.setData({
          likes: true,
          [icon]: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/weishoucang.png',
          [classes]: '',
          [name]: '收藏'
        })
      }
      that.setData({
        randerTitle: randerTitle,//挂载页面
        current_no: current_no,//更新下标
        allRender: allRender,//更新已经渲染的数据
        ProblemType: randerTitle.ProblemType,//更新题目类型
        answerImg: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/hideAnswer.png',
        activeAnswer: 'defaultAnswer',
        correctoption: '',
        showAny:isShow,
        multishowAny: true//
      })
    }
    if (current_no > 0) {
      let icon = 'tabItems[0].icon'
      this.setData({
        [icon]: 'https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/leftsing.png',
      })
    }
    if( randerTitle.ProblemType == '2' ){
        let options= {
          problemId:randerTitle.ProblemId,
          answe: this.data.multiselect
        }
        app.encryption({
          url: api.default.answerEvents,
          data: options,
          method: 'POST',
          dataType: "json",
          success: function (res) {
            console.log(res)
          },
          fail: function (n) {
            console.log('333333')
          }
        })
    }
    if(randerTitle.yourAnswer && randerTitle.yourAnswer!= '' ){ //如果改题目已经做过
      that.init(randerTitle.yourAnswer)
  }
  },

只供参考