fengrui99

电梯直达

楼主

 发表于 2019-5-5 10:57 

本帖最后由 fengrui99 于 2019-5-5 11:06 编辑

原文来自:https://www.frbkw.com/1700/
通过WordPress自带的 rest api接口我们去实现uni-app的上拉刷新和下拉加载，首先我们需要一点基础。如果有基础可以直接看正文 
1.uni-app 实战接入热门小说API接口 适用于新手
2.Uni-App 微信项目练习首页列表含界面传参 新手教程（一)
3.Uni-App 微信项目练习列表传参聊天窗口 新手教程（二）

如果有基础的我们就看这这边哈哈！

1.建立项目
（节约资源用以前的代替）

2.开启下拉功
能在目录pages.json文件中找到首页位置给它添加“enablePullDownRefresh”: true 完整代码如下

[Asm] 纯文本查看 复制代码

?

1

2

3

4

5

6

"path": "pages/index/index",

                        "style": {

                                "navigationBarTitleText": "首页",

                                "backgroundColor": "#FFFFFF",

                                "enablePullDownRefresh": true

                        }

3.引入组件
我们在官方dome里找到components目录下uni-load-more文件，复制到我们项目中。且在首页中引入（在script标签下）

[Asm] 纯文本查看 复制代码

?

1

2

//1引入组件 uni-load-more.vue

import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';

继续在下方去声明全局变量// 定义全局参数,控制数据加载var _self, page = 1,timer = null;
最后得export default中注册组件

[Asm] 纯文本查看 复制代码

?

1

components: {        //注册组件        uniLoadMore},

4.定义请求函数
件中的轮播图和卡片文章 多余部分代码大家直接忽视就好哈哈效果图

[Asm] 纯文本查看 复制代码

?

1

2

3

4

5

6

7

loadingText: '加载中...',

        loadingType: 0, //定义加载方式 0---contentdown  1---contentrefresh 2--contentnomore

        contentText: {

        contentdown: '上拉显示更多',

        contentrefresh: '正在加载...',

        contentnomore: '没有更多数据了'

},

页面打开后我们直接定义请求一个getnewsList函数

[Asm] 纯文本查看 复制代码

?

1

2

3

4

5

6

onLoad: function() {

                        this.TowerSwiper('swiperList');

                        _self = this;

                        //页面一加载时请求一次数据

                        this.getnewsList();

                },

onPullDownRefresh监控下拉

[Asm] 纯文本查看 复制代码

?

1

2

3

4

onPullDownRefresh: function() {

                        //下拉刷新的时候请求一次数据

                        this.getnewsList();

                },

onReachBottom监控上拉

[Asm] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

onReachBottom: function() {

                        //触底的时候请求数据，即为上拉加载更多

                        //为了更加清楚的看到效果，添加了定时器

                        if (timer != null) {

                                clearTimeout(timer);

                        }

                        timer = setTimeout(function() {

                                _self.getmorenews();

                        }, 1000);

                        // 正常应为:

                        // _self.getmorenews();

                },

5.上拉 下拉代码块
文章API:https://www.frbkw.com/wp-json/wp/v2/posts
methods中编写上拉加载

[Asm] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// 上拉加载

                         getmorenews: function() {

                            if (_self.loadingType !== 0) {//loadingType!=0;直接返回

                                return false;

                            }

                            _self.loadingType = 1;

                            uni.showNavigationBarLoading();//显示加载动画

                            uni.request({

                                url:'https://www.frbkw.com/wp-json/wp/v2/posts?page=' + page,

                                method: 'GET',

                                success: function(res) {

                                    console.log(JSON.stringify(res));

                                    if (res.data == null) {//没有数据

                                        _self.loadingType = 2;

                                        uni.hideNavigationBarLoading();//关闭加载动画

                                        return;

                                    }

                                    page++;//每触底一次 page +1

                                    _self.newsList = _self.newsList.concat(res.data);//将数据拼接在一起

                                    _self.loadingType = 0;//将loadingType归0重置

                                    uni.hideNavigationBarLoading();//关闭加载动画

                                }

                            });

                        },

下拉刷新

[Asm] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

// 下拉刷新

                        getnewsList: function() {//第一次回去数据

                            page = 1;

                            this.loadingType = 0;

                            uni.showNavigationBarLoading();

                            uni.request({

                                url: 'https://www.frbkw.com/wp-json/wp/v2/posts?page=1',

                                method: 'GET',

                                success: function(res) {                                               

                                    page++;//得到数据之后page+1

                                    _self.newsList = res.data;

                                                console.log(_self.newsList)

                                    uni.hideNavigationBarLoading();

                                    uni.stopPullDownRefresh();//得到数据后停止下拉刷新

                                }

                            });

                        },

6.总结
这个方式也是在uni-app基础视频中看到的。其中还有一个地方不是很好，因为在请求api返回数据中无法使用this，所以我们得在一开始去定义_self。主要还是因为写法的原因文章返回是

[Asm] 纯文本查看 复制代码

?

1

2

3

success: function(res) {

        console.log(res.data);

}

如果是官方的

[Asm] 纯文本查看 复制代码

?

1

2

3

4

success: (res) => {

        console.log(res.data);

  

    }
 
   
   

Uni-app实战上加载新下拉刷新相关推荐

  1. html5上拉下拉刷新,APP 上拉加载，下拉刷新 介绍

    开发APP时,很多时候都会用上,上拉加载数据,下拉刷新等功能,本文件介绍两种. 一种是原生APP自带的上拉加载,下拉刷新功能,一种是用JS 插件写的上拉加载,下拉刷新. 1.原生APP 的 上拉加载, ...

  2. 让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键

    前言 上拉加载和下拉刷新是小程序开发的常见需求.本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能,为用户带来更加流畅.便捷的使用体验. 实现效果如下: 实现思路: 1. 首先需要在使用到的 j ...

  3. 小程序上拉加载，下拉刷新

    小程序上拉加载,下拉刷新 data: {collectinformation: null,number: 1,size: 10,isOpenLoading: true,isEmpty: true,is ...

  4. ListView上拉加载和下拉刷新多种实现方式

    ListView上拉加载和下拉刷新多种实现方式 该篇为ListView下拉刷新和上拉加载实现的各种方法大合集.可能在具体的细节逻辑上处理不太到位,但基本上完成逻辑的实现.细节方面,个人可以根据自己的需 ...

  5. better-scroll 上拉加载，下拉刷新(解决移动端长页面卡顿)

    一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...

  6. 基于iSroll 5.0实现的上拉加载和下拉刷新插件

    Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件 移动端效果比较好,开发者工具打开后,需要刷新下页面. [演示地址:] https://chenyk2016.githu ...

  7. tableview插入刷新_iOS开发之UITableView与UISearchController实现搜索及上拉加载，下拉刷新实例代码...

    废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" ...

  8. 如何实现上拉加载，下拉刷新？

    如何实现上拉加载,下拉刷新? 一.前言 二.实现原理 上拉加载 下拉刷新 三.案例 小结 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 ...

  9. 如何实现上拉加载和下拉刷新

    下拉刷新和上拉加载这两种交互⽅式通常出现在移动端中 本质上等同于PC⽹⻚中的分⻚,只是交互形式不同 开源社区也有很多优秀的解决⽅案,如 iscroll . better-scroll . pullto ...

最新文章

  1. echarts legend颜色_echarts数据可视化图表（二）：双柱状图
  2. python变量无需创建赋值_Python 第 2 章 变量及赋值运算符
  3. Bootstrap系列 -- 36. 向上弹起的下拉菜单
  4. CUDA C编程权威指南 第五章 共享内存和常量内存
  5. Selenimu做爬虫 - oscarxie - 博客园
  6. python中list和numpy的array的转换
  7. Unity官方中文网站
  8. 下载spring源码
  9. 论文阅读|Lightweight OpenPose
  10. 自动生成员工号c语言,C语言课程设计级.doc
  11. nodejs操作Excel
  12. 数学中的全微分(方程)，全导数(公式)，偏微分(方程)，梯度，斜率，导数，方向导数等
  13. 喵懂区块链23期|9012年了，侧链还是一只又死又活的薛定谔猫？
  14. 中国最年轻的亿万富翁_我和一个亿万富翁一起吃饭。 他给我的建议是无价的。
  15. Cognos入门教程
  16. python药学应用_Python数据分析实例一：医院药品销售数据
  17. apk包反编译，签名
  18. linux 编译gdal库下载,各个版本VS编译好的GDAL库下载
  19. linux 磁盘管理3板斧,df、du、fdisk：Linux磁盘管理三板斧的使用心得 | 旺旺知识库...
  20. 今日科技联播：今日头条放弃悟空问答？阿里蝉联全球区块链专利榜冠军

热门文章

  1. passport通行证设计一例
  2. GripSeal快速接头钢管 铝管 不锈钢管外径密封堵头 G30系列高压外包快速连接器
  3. springboot+vue校园人员来访出入登记管理系统java
  4. excel量化交易模板_适用于新手的量化交易模板
  5. 武汉理工的计算机复试题难,武汉理工2018计算机复试真题分享
  6. c# 创建excel表头及内容
  7. 怎么在mysql中附加数据库文件_sql无法附加数据库怎么办_sql附加不上数据库的解决方法－系统城...
  8. MySQL字段值如何区分大小写
  9. cefsharp读取exe html,wpf中使用cefsharp加载本地html网页并实现cs和js的交互并且cefsh...
  10. Window10 OpenCV3.4.7 CMake3.18.0 QT5.5.0 编译配置及调用