Uni-app基础实战上加载新下拉刷新 WordPress rest api实例 _WordPress

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。这篇文章主要讲述Uni-app基础实战上加载新下拉刷新 WordPress rest api实例相关的知识，希望能为你提供帮助。
Uni-app实战上加载新下拉刷新 WordPress rest api实例通过WordPress自带的 rest api接口我们去实现uni-app的上拉刷新和下拉加载，首先我们需要一点基础。如果有基础可以直接看正文，如果大家和枫瑞一样也是新手那大家可以阅读以下文章

uni-app 实战接入热门小说API接口适用于新手
Uni-App 微信项目练习首页列表含界面传参新手教程（一)
Uni-App 微信项目练习列表传参聊天窗口新手教程（二）

如果有基础的我们就看这这边哈哈！
[tip]1.建立项目[/tip]
（节约资源用以前的代替）

Uni-app基础实战上加载新下拉刷新 WordPress rest api实例

文章图片

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

1 "path": "pages/index/index", 2"style": { 3"navigationBarTitleText": "首页", 4"backgroundColor": "#FFFFFF", 5"enablePullDownRefresh": true 6}

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

1 //1引入组件 uni-load-more.vue 2 import uniLoadMore from ‘../../components/uni-load-more/uni-load-more.vue‘;

继续在下方去声明全局变量

1 // 定义全局参数,控制数据加载 2 var _self, page = 1,timer = null;

最后得export default中注册组件

1 components: { 2//注册组件 3uniLoadMore 4 },

[tip]4.定义请求函数[/tip]
在定义函数之前我们在return中去写一些状态

1 loadingText: ‘加载中...‘, 2loadingType: 0, //定义加载方式 0---contentdown1---contentrefresh 2--contentnomore 3contentText: { 4contentdown: ‘上拉显示更多‘, 5contentrefresh: ‘正在加载...‘, 6contentnomore: ‘没有更多数据了‘ 7 },

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

1 onLoad: function() { 2this.TowerSwiper(‘swiperList‘); 3_self = this; 4//页面一加载时请求一次数据 5this.getnewsList(); 6},

onPullDownRefresh监控下拉

1 onPullDownRefresh: function() { 2//下拉刷新的时候请求一次数据 3this.getnewsList(); 4},

【Uni-app基础实战上加载新下拉刷新 WordPress rest api实例】
onReachBottom监控上拉

1 onReachBottom: function() { 2//触底的时候请求数据，即为上拉加载更多 3//为了更加清楚的看到效果，添加了定时器 4if (timer != null) { 5clearTimeout(timer); 6} 7timer = setTimeout(function() { 8_self.getmorenews(); 9}, 1000); 10// 正常应为: 11// _self.getmorenews(); 12},

[tip]5.上拉下拉代码块[/tip]
枫瑞博客网文章API:https://www.frbkw.com/wp-json/wp/v2/posts
methods中编写上拉加载

1 // 上拉加载 2getmorenews: function() { 3if (_self.loadingType !== 0) {//loadingType!=0; 直接返回 4return false; 5} 6_self.loadingType = 1; 7uni.showNavigationBarLoading(); //显示加载动画 8uni.request({ 9url:‘https://www.frbkw.com/wp-json/wp/v2/posts?page=‘ + page, 10method: ‘GET‘, 11success: function(res) { 12console.log(JSON.stringify(res)); 13if (res.data =https://www.songbingjia.com/android/= null) {//没有数据 14_self.loadingType = 2; 15uni.hideNavigationBarLoading(); //关闭加载动画 16return; 17} 18page++; //每触底一次 page +1 19_self.newsList = _self.newsList.concat(res.data); //将数据拼接在一起 20_self.loadingType = 0; //将loadingType归0重置 21uni.hideNavigationBarLoading(); //关闭加载动画 22} 23}); 24},

下拉刷新

1 // 下拉刷新 2getnewsList: function() {//第一次回去数据 3page = 1; 4this.loadingType = 0; 5uni.showNavigationBarLoading(); 6uni.request({ 7url: ‘https://www.frbkw.com/wp-json/wp/v2/posts?page=1‘, 8method: ‘GET‘, 9success: function(res) { 10page++; //得到数据之后page+1 11_self.newsList = res.data; 12console.log(_self.newsList) 13uni.hideNavigationBarLoading(); 14uni.stopPullDownRefresh(); //得到数据后停止下拉刷新 15} 16}); 17}, 18 数据绑定 19 20 [tip type=” error” ]因为博客前端采用vue渲染，所以数据渲染的话请删除里面的 “ 草” 字。或者下载源码查看[/tip] 21 22 < !-- 文章列表开始 --> 23< view class="cu-card article" :class="isCard?‘no-card‘:‘‘ "> 24< view class="cu-item shadow index-wenz" v-for="wpwenz in newsList"> 25< view class="title"> 26< view class="text-cut"> {草{wpwenz.title.rendered}}< /view> 27< /view> 28< view class="content"> 29< image :src="https://www.songbingjia.com/android/wpwenz.featured_image_src" mode="aspectFill"> < /image> 30< view class="desc"> 31< view class="text-content"> {草{wpwenz.excerpt.rendered}}< /view> 32< view> 33< !-- < view class="cu-tag bg-red light sm round"> 枫瑞博客< /view> --> 34< view class="cu-tag bg-green light sm round"> {草{wpwenz.date_gmt}}< /view> 35< /view> 36< /view> 37< /view> 38< /view> 39< /view> 40< !-- 文章列表结束 -->

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