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

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

uni-app最简单的手写上拉加载不用插件-度崩网-几度崩溃

 

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

1.建立项目

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

uni-app最简单的手写上拉加载不用插件-度崩网-几度崩溃

 

2.发送请求

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

  1. onLoad() {
  2. uni.request({
  3. url:'https://www.frbkw.com/wp-json/wp/v2/posts',
  4. success: (res) => {
  5. this.abc = res.data;
  6. }
  7. })
  8. },

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

  1. data() {
  2. return {
  3. abc:[],
  4. loadingText:'加载中...'
  5. }
  6. },

uni-app最简单的手写上拉加载不用插件-度崩网-几度崩溃

3.监听底部

  1. // 监听触底
  2. onReachBottom() {
  3. this.getnewsList();
  4. },

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

  1. methods: {
  2. //屏幕到底部时候发起请求 下一页
  3. getnewsList() {
  4. uni.request({
  5. url:'https://www.frbkw.com/wp-json/wp/v2/posts',
  6. data:{page:page},
  7. success:(res) => {
  8. console.log(res);
  9. if (res.statusCode == 400) { //没有数据
  10. this.loadingText="没有数据了!";
  11. return;
  12. }
  13. page++; //每触底一次 page +1
  14. console.log(page);
  15. this.abc = this.abc.concat(res.data); //将数据拼接在一起
  16. }
  17. });
  18. }
  19. },

 

相关源码下载地址:

本文转载自枫瑞博客,源码由 “东泰” 友情提供

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

Uniapp

uni-app原生导航配置顶部自定义按钮以及图标

2019-11-27 17:43:54

Uniapp

uni-app外层view包裹内层view防止冒泡事件

2019-11-27 17:46:09

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索