码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2020-03-04 11:20:00      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:size   技术   text   erp   onload   监控   default   data   tip   

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             },
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="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。主要还是因为写法的原因

文章返回是

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]

效果图

技术图片

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

标签:size   技术   text   erp   onload   监控   default   data   tip   

原文地址:https://www.cnblogs.com/adozheng/p/12408239.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!