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]

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

[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]

效果图