美文网首页
前端分页形式

前端分页形式

作者: Monster丶Yu | 来源:发表于2018-08-23 10:57 被阅读0次

    1.获得需要的数据

        无论是mock数据还是后台的Ajax请求获得的数据,先进行data的分离,处理,判断......最终获得一个data数组

        这里说的是前端分页,前端处理数据

    2.处理数据

        1) 数据再分割。例如经过第一步获得了一个data数组,那么我们使用数组forEach()将data数组按需分割成N个二维数组,那么对应页数加载对应的二位数组即可。

        上代码:

                pages (data) {

                        Array.isArray(data) ? data : return

                        const pages = []

                        data.forEach((item,index) => {

                            const page = Math.floor(index/10)

                            if(!pages[page]){

                                pages[page]=[]

                        }

                            pages[page].push(item)

                        })

                        return pages

                }

    3.数据懒加载

        在数据量大的时候,那么就会出现加载数据的合理性

        前端只能在源头控制,就是请求来的data数组,可以设置分批请求 ,例如开始请求200条,后面的再通过点击事件触发

    相关文章

      网友评论

          本文标题:前端分页形式

          本文链接:https://www.haomeiwen.com/subject/fcmdiftx.html