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

通过WordPress自带的 rest api接口我们去实现uni-app的上拉刷新和下拉加载，首先我们需要一点基础。如果有基础可以直接看正文，如果大家和枫瑞一样也是新手那大家可以阅读以下文章

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

• Uni-App 微信项目练习列表传参聊天窗口 新手教程（二）

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

[tip]1.建立项目[/tip]

（节约资源用以前的代替）

[tip]2.开启下拉功能[/tip]

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

"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			}

[tip]3.引入组件[/tip]

我们在官方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
},

[tip]4.定义请求函数[/tip]

在定义函数之前我们在return中去写一些状态

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

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

onLoad: function() {
			this.TowerSwiper('swiperList');
			_self = this;
			//页面一加载时请求一次数据
			this.getnewsList();
		},

onPullDownRefresh监控下拉

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

onReachBottom监控上拉

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

[tip]5.上拉 下拉代码块[/tip]

枫瑞博客网文章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();//得到数据后停止下拉刷新
			        }
			    });
			},

数据绑定

[tip type=”error”]因为博客前端采用vue渲染，所以数据渲染的话 请删除里面的 “草” 字。或者下载源码查看[/tip]

<!-- 文章列表开始 -->
		<view class="cu-card article" :class="isCard?'no-card':'' ">
			<view class="cu-item shadow index-wenz" v-for="wpwenz in newsList">
				<view class="title">
					<view class="text-cut">{草{wpwenz.title.rendered}}</view>
				</view>
				<view class="content">
					<image :src="wpwenz.featured_image_src" mode="aspectFill"></image>
					<view class="desc">
						<view class="text-content">{草{wpwenz.excerpt.rendered}}</view>
						<view>
							<!-- <view class="cu-tag bg-red light sm round">枫瑞博客</view> -->
							<view class="cu-tag bg-green light sm round">{草{wpwenz.date_gmt}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 文章列表结束 -->

[tip]6.总结[/tip]

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

文章返回是

 success: function(res) {
        console.log(res.data);
}

如果是官方的

success: (res) => {
        console.log(res.data);
  
    }

就可以使用this无需在定义。

[tip type=”worning”]其中使用color-UI组件中的轮播图和卡片文章 多余部分代码大家直接忽视就好哈哈[/tip]

效果图