Uni-app实战上加载新下拉刷新

 

 

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);         }