Uni-app实战上加载新下拉刷新 WordPress rest api实例
通过WordPress自带的 rest api接口我们去实现uni-app的上拉刷新和下拉加载，首先我们需要一点基础。如果有基础可以直接看正文，如果大家和枫瑞一样也是新手那大家可以阅读以下文章
如果有基础的我们就看这这边哈哈！
[tip]1.建立项目[/tip]
（节约资源用以前的代替）
[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 //注册组件 3 uniLoadMore 4 },
[tip]4.定义请求函数[/tip]
在定义函数之前我们在return中去写一些状态
1 loadingText: '加载中...', 2 loadingType: 0, //定义加载方式 0---contentdown 1---contentrefresh 2--contentnomore 3 contentText: { 4 contentdown: '上拉显示更多', 5 contentrefresh: '正在加载...', 6 contentnomore: '没有更多数据了' 7 },
页面打开后我们直接定义请求一个getnewsList函数
1 onLoad: function() { 2 this.TowerSwiper('swiperList'); 3 _self = this; 4 //页面一加载时请求一次数据 5 this.getnewsList(); 6 },
onPullDownRefresh监控下拉
1 onPullDownRefresh: function() { 2 //下拉刷新的时候请求一次数据 3 this.getnewsList(); 4 },
onReachBottom监控上拉
1 onReachBottom: function() { 2 //触底的时候请求数据，即为上拉加载更多 3 //为了更加清楚的看到效果，添加了定时器 4 if (timer != null) { 5 clearTimeout(timer); 6 } 7 timer = 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 // 上拉加载 2 getmorenews: function() { 3 if (_self.loadingType !== 0) {//loadingType!=0;直接返回 4 return false; 5 } 6 _self.loadingType = 1; 7 uni.showNavigationBarLoading();//显示加载动画 8 uni.request({ 9 url:'https://www.frbkw.com/wp-json/wp/v2/posts?page=' + page, 10 method: 'GET', 11 success: function(res) { 12 console.log(JSON.stringify(res)); 13 if (res.data == null) {//没有数据 14 _self.loadingType = 2; 15 uni.hideNavigationBarLoading();//关闭加载动画 16 return; 17 } 18 page++;//每触底一次 page +1 19 _self.newsList = _self.newsList.concat(res.data);//将数据拼接在一起 20 _self.loadingType = 0;//将loadingType归0重置 21 uni.hideNavigationBarLoading();//关闭加载动画 22 } 23 }); 24 },
下拉刷新
1 // 下拉刷新 2 getnewsList: function() {//第一次回去数据 3 page = 1; 4 this.loadingType = 0; 5 uni.showNavigationBarLoading(); 6 uni.request({ 7 url: 'https://www.frbkw.com/wp-json/wp/v2/posts?page=1', 8 method: 'GET', 9 success: function(res) { 10 page++;//得到数据之后page+1 11 _self.newsList = res.data; 12 console.log(_self.newsList) 13 uni.hideNavigationBarLoading(); 14 uni.stopPullDownRefresh();//得到数据后停止下拉刷新 15 } 16 }); 17 },
数据绑定
[tip type=”error”]因为博客前端采用vue渲染，所以数据渲染的话 请删除里面的 “草” 字。或者下载源码查看[/tip]
1 <!-- 文章列表开始 --> 2 <view class="cu-card article" :class="isCard?'no-card':'' "> 3 <view class="cu-item shadow index-wenz" v-for="wpwenz in newsList"> 4 <view class="title"> 5 <view class="text-cut">{草{wpwenz.title.rendered}}</view> 6 </view> 7 <view class="content"> 8 <image :src="wpwenz.featured_image_src" mode="aspectFill"></image> 9 <view class="desc"> 10 <view class="text-content">{草{wpwenz.excerpt.rendered}}</view> 11 <view> 12 <!-- <view class="cu-tag bg-red light sm round">枫瑞博客</view> --> 13 <view class="cu-tag bg-green light sm round">{草{wpwenz.date_gmt}}</view> 14 </view> 15 </view> 16 </view> 17 </view> 18 </view> 19 <!-- 文章列表结束 -->
[tip]6.总结[/tip]
这个方式也是在uni-app基础视频中看到的。其中还有一个地方不是很好，因为在请求api返回数据中无法使用this，所以我们得在一开始去定义_self。主要还是因为写法的原因
文章返回是
1 success: function(res) { 2 console.log(res.data); 3 }
如果是官方的
1 success: (res) => { 2 console.log(res.data); 3 4 }
就可以使用this无需在定义。
[tip type=”worning”]其中使用color-UI组件中的轮播图和卡片文章 多余部分代码大家直接忽视就好哈哈[/tip]
效果图
