uni-app最简单的手写上拉加载不用插件

在long long ago枫瑞也写过一个关于uni-app上拉加载的文章，整体来说文章新手很不友好。在 好友“东泰”热情帮助下，我这个菜鸟新手也用最简单的方式写出了一个上拉加载，方式简单，但是视觉效果偏差。

wordpress接口：https://www.frbkw.com/wp-json/wp/v2/posts

1.建立项目

首先我们建立一个新的项目（万恶老图）

2.发送请求

页面首次打开后发送一次请求，写在onLoad中

onLoad() { uni.request({ url:'https://www.frbkw.com/wp-json/wp/v2/posts', success: (res) => { this.abc = res.data; } }) },

data中添加abc数组，在浏览器中看到数据

data() { return { abc:[], loadingText:'加载中...' } },

3.监听底部

// 监听触底 onReachBottom() { this.getnewsList(); },

下拉触发函数：data：{page：page} 中的page自增循环，循环后data:{page:值}他的值自动更变，所以就形成了上拉加载

methods: { //屏幕到底部时候发起请求 下一页 getnewsList() { uni.request({ url:'https://www.frbkw.com/wp-json/wp/v2/posts', data:{page:page}, success:(res) => { console.log(res); if (res.statusCode == 400) { //没有数据 this.loadingText="没有数据了！"; return; } page++; //每触底一次 page +1 console.log(page); this.abc = this.abc.concat(res.data); //将数据拼接在一起 } }); } },

相关源码下载地址：

源码由 “东泰” 友情提供

链接: https://pan.baidu.com/s/1MrC02cSxKr2VJ9cSGlmWLg 提取码: t369