uniapp-实现触底加载&拼接新数据~

本文可能能比较清晰讲解一下uniapp如何实现触底加载新数据

首先要有一个接口

https://ku.qingnian8.com/dataApi/news/newslist.php

一个数据请求的接口

里面的数据大概长这样~

但是我们还需要知道这个接口有哪些参数

比如有

num 3条

page 哪一页

思想是：在触底的是后再次获取网络请求，但是在获取网络请求是要让page即页码++了，即要请求来新数据

分析:

其实num和page是互通的

总共有若干条数据

num设置几条数据为一页,将整体数据分成 总数/num 组

page设置取到分号页后，哪一页的数据。

你通过测试这个接口就可以发现这个特点~一共262条数据，num=5,page=2获取到id为253-257的数据，num=2,page=4获取到id为255和256的数据。空间的，num简洁决定着分页数。而不是容易误解的，"这一页的其他数据怎么不要了嘞？"，其实是这一页的数据已经取完了。

在data中设置一个currentPage属性，可以把它设置成random每次登录后结果为随机的计算属性用computed:{}，最简单的是把它设置成一个定值，每当一进来，首先看到的都是这页的数据，然后再一页一页地翻。

实现：

在data中设置一个currentPage属性，

在请求逻辑中的 参数 里，按照接口文档给的

设置一个：

page:this.currentPage

getData(){

        uni.request({

                url:"https://ku.qingnian8.com/dataApi/news/newslist.php"

                data:{

                        cid:id,

                        page:this.currentPage

                }

                success:res=>{

                        console.log(res)

                        this.newsArr = res.data // 具体数据在哪儿看console.log出的res，然后知道我们要用的数据在哪一层(今天刚好看见对象'.'属性是层级访问)//当然我觉得这里也可以做一个拼接。就是接上之前的数据进行显示

                }

        })，

}

然后在onReachBottom中设置

this.currentPage++,

并调用请求数据的方法

this.getData()

这样一来，每次触底后幕后就执行this.currentPage++,然后执行getData()方法发送请求，对newsArr进行更新，到幕前则呈现出更新后的数据，这就是强大的Vue的【数据驱动】

当然，在每次请求时肯定需要一段时间，于是可以在getData()的开头设置一个uni.onLoading(),

然后再在uni.request({})中的complete设置一个

uni.hideLoading()

这样每次请求过程中显示onLoading()对应的效果，请求结束后不过是否请求成功，都执行uni.hideLoading()消掉uni.onLoading()的效果。

还可以设置一个防抖，不过可能没必要，因为，可能触底后，一段时间都是在触底状态(除非你上滑些许再次触底)，用户一般也不会这么做，因为比较麻烦，而且一般间歇性的请求多次服务器还是承受的起的，而且一般用户要的数据本来就随机就可以(当然再有个性化推荐算法的程序中，则应该是在个性化的库中随机推荐)，所以可能一般可以不做防抖。即clearTimeout()&setTimeout()机制。

但我觉着还是做一个好了，

则getData升级成

getData(){

        uni.onLoading(),

        clearTImeout(this.timer)

        this.timer = setTImout(()={

                uni.request({

                        url:'https://ku.qingnian8.com/dataApi/news/newslist.php',

                        data:{

                                cid:id,

                                page:this.currentPage

                        },

                        success:(res)=>{

                                this.newsArr = res.data

                        },

                        fali:()=>{

                        请求失败逻辑xxx如

                                uni.showToast({

                                        title: '请求失败~再试试哈~',

                                        icon: 'none',

                                        duration: 500 // 提示文字呈现时间为0.5s

                                });

                        }，

                        complete:()=>{

                                uni.hideLoading()

                        }

                })

        }，300)

}忽然想到能不能配一个紧急号码符字典

在请求实属着急时，若请求失败，则uni.showToast({ title:'紧急号码符' })

然后提供一个紧急号码符翻译器 ，里面通过自动查阅字典实现符号的翻译，翻译成联系方式，直接通过这个联系方式找到人工服务者进行数据调取等服务的协助~这样即能避免联系方式被用户频繁拨打，又可以给紧急情况一个可能性的兜底。

这样就比较完整了~

所以说，其实也需要后端能配合好，我们才好实现这个效果呀。

总：通过本文，我们不仅浅析推测了一下后端分页的实现方法，

还巧用onReachBottom(){}和动态数据(指newsArr和this.timer和currentPage这几个数据)、请求(uni,request())和uni.showToast()进行消息提示，结合防抖机制clearTImeout()与setTimeout()，实现一个比较完整的触底刷新

当然，实际当中，应该多用的是拼接，即刷新后看到更多，而不是刷新后就看不到上面的内容了。这也可以通过修改success:()=>{}中的内容this.newsArr = res.data改成可能可以用push()方法比如this.newsArr.push(res.data)，之后若发现有错行不通我就改，似乎是得行的，大家有好方法请赐教评论区~

这里用到虾米老师提供的接口，若涉及到侵权或其他不良影响则删，也恰巧给虾米老师打个广噢~

如有错误请指正，十分感谢~

更新一下，之前没注意看到后头，现在知道怎么简便的将数组拼接了~然后我们还要防止特殊情况下的两个bug，请见后文：

关于数据(数组的拼接)的连接

可以使用contact()

而我们直接使用ES6的写法就可以了

即

this.newsArr = [...this.newsArr,...res.data]就可以了

别写成[this.newsArr,res.data]这样就变成是一个二维数组了。

"特殊"情况

如果是在同一页有个分类的滚动条,比如

体育 国际 养生 ...

点击每个选项跳转到不同的内容去

那么需要给跳转的那个方法中添加上一个currentPage:1或重置一下currrentPage在一个合理的取值范围内

防止两个bug

当然这是由于各选项中消息条数不同，而如果还按currentPage等于上一条来，就可能由于下一个选项中消息少，没堆到这么多页，而会出现没有东西返回的"bug"场面~

而且注意的是跳转时还要加一个就是把数据数组置为空，因为由于我们统一使用一个方法getData()获取内容，其中success中写的有事数组的拼接，则会导致跳转是时各项中的消息拼到一块去，于是在跳转到方法中还需要注意先把this.newsArr = [] 再执行getData()方法。

即：

ES6有语法[...数组,...数组]就是讲两个数组拼接起来，而不会成为一个二维数组

当同一页实现分选项出现不同消息时，

在 【点击选项跳转】 的方法中注意page值的重置如this.currentPage=xxx和先赋空数据数组再执行请求的方法如this.newsArr = [],然后再执行this.getData()。

如有错误请毫不犹豫地挑出来，十分感谢~