uni-app上拉加载更多 --下拉刷新

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

 

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

     "style": {

                "navigationBarTitleText": "首页",

                "backgroundColor": "#FFFFFF",

                "enablePullDownRefresh": true

          }

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

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

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

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

components: {         //注册组件       

                          uniLoadMore

                    }, 

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

loadingText: '加载中...',

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

        contentText: {

        contentdown: '上拉显示更多',

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

        contentnomore: '没有更多数据了'

},

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

onLoad: function() {

             this.TowerSwiper('swiperList');

             _self = this;

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

             this.getnewsList();

          },

onPullDownRefresh监控下拉

onReachBottom: function() {

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

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

                    if (timer != null) {

                        clearTimeout(timer);

                    }

                    timer = setTimeout(function() {

                        _self.getmorenews();

                    }, 1000);

                    // 正常应为:

                   // _self.getmorenews();

              },

 

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

// 上拉加载

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();//关闭加载动画

                   }

                });

        },

 

 下拉刷新

// 下拉刷新

 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();//得到数据后停止下拉刷新

               }

          });

},

 

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

success: function(res) {

        console.log(res.data);

}

如果是官方的

success: (res) => {

        console.log(res.data);

    }