Uni-app基础实战分类目录刷新 WordPress rest api实例(三)

Uni-app基础实战分类目录刷新 WordPress rest api实例

哈还是老话题,本文章市wordpress博客的续文,从开始的首页文件接入数据,详情界面富文本解析,再到文本的分类目录刷新。建议先看之前的文章

接口分析

分类接口: https://www.frbkw.com/wp-json/wp/v2/categories

分类文章接口(5是分类id):https://www.frbkw.com/wp-json/wp/v2/posts?categories=5

分类文章页码:https://www.frbkw.com/wp-json/wp/v2/posts?categories=5&page=1

Uni-app基础实战分类目录刷新 WordPress rest api实例(三)

获取指定分类

拿到分类接口后可以直接在一个界面中直接循环所有的分类,但是枫瑞个人还是喜欢说在细分一点。按该博客的分类是移动端UI框架下会有2个子分类mui和uni。于是就把移动端ui框架做单页,这个界面至显示mui和uni。前提是我们先获取一个模板顶部滚动模板,官方或者下载插件都可以。

首先onload中添加一个函数,为了方便也写了一个下拉的

1 onLoad () {
2             this.classifywp();//获取分类
3             this.getnewsList();//下拉刷新
4 },

 

随后methods中执行函数

 1 methods: {
 2      // 分类目录接口
 3     classifywp(){
 4             uni.request({
 5             url: ‘https://www.frbkw.com/wp-json/wp/v2/categories‘,
 6             success: res => {
 7                     this.wpclassify=res.data;
 8                     },
 9             });
10     },
11 }

 

return中绑定下wpclassify,我们还是去建立一个筛选的制定分类为ids。大概意思就是一组人,我们先把小组人全部点名一次,随后我们在挑选出几个(其实哇,写不来过滤就用这个方式简单点哎),其中ids里面的0和1分类代表分类的id

1 return {
2         wpclassify:‘‘,
3         ids:[0,1],
4 };

 

我们只要选择ids 在从wpclassify中拿数据(有使用组件)

1 <!-- 组件样式 -->
2         <scroll-view scroll-x class="bg-white nav text-center">
3             <!-- 获取分类目录 -->
4             <view class="cu-item" :class="index==TabCur?‘text-green cur‘:‘‘" v-for="(item,index) in ids" :key="index" @tap="tabSelect" :data-id="index" >
5                 {请删除我{wpclassify[ids[index]].name}}
6             </view>            
7         </scroll-view>

 

这样我们就可以看到分类了咯,因为一个界面下有2个分类,那么他要分开显示和分开刷新。组件中的有一个TabCur值,可以用它来显示不同分类下内容

1 <view v-show="TabCur==0">我是第一个分类><view>
2 <view v-show="TabCur==1">我是第二个分类><view>

 

分类刷新

同理我们采用以上方法去刷新我们的内容。添加下拉函数

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

 

不要忘记在psges.json中要开启下拉

1 {
2             "path": "pages/kaifa/kaifa",
3             "style": {
4                 "navigationBarTitleText": "移动端框架",
5                 "backgroundColor": "#FFFFFF",
6                 "enablePullDownRefresh": true //我是开启下拉刷新
7             }
8         },

 

methods中开始写函数,用if去判断

 1 //接口下拉刷新
 2             getnewsList: function() {//第一次回去数据
 3                // 判断分类刷新
 4                 if (this.TabCur==0) {
 5                     page = 1;
 6                     uni.showNavigationBarLoading();
 7                     uni.request({
 8                         url: ‘https://www.frbkw.com/wp-json/wp/v2/posts?categories=5&page=1‘,
 9                         success: res => {                        
10                             page++;//得到数据之后page+1
11                             this.wpmui = res.data;
12                             uni.hideNavigationBarLoading();
13                             uni.stopPullDownRefresh();//得到数据后停止下拉刷新
14                         }
15                     });
16                 } else if (this.TabCur==1) {
17                     page = 1;
18                     uni.showNavigationBarLoading();
19                     uni.request({
20                         url: ‘https://www.frbkw.com/wp-json/wp/v2/posts?categories=92&page=1‘,
21                         success: res => {                        
22                             page++;//得到数据之后page+1
23                             this.wpuniapp = res.data;
24                             uni.hideNavigationBarLoading();
25                             uni.stopPullDownRefresh();//得到数据后停止下拉刷新
26                         }
27                     });
28                 }
29             },

 

总结

上拉就不写了哈,大家看上次的文章。效果图

Uni-app基础实战分类目录刷新 WordPress rest api实例(三)

已知bug:

1.上拉加载页码会出现过大bug上拉无法点击得下拉一次恢复正常

2.console中报name未定义,原因来自wpclassify[ids[index]].name,但不影响

注意:

1.wp博客不同的主题会有不同得独立样式,在使用该源码的时候自己得在从新检测下

Uni-app基础实战分类目录刷新 WordPress rest api实例(三)

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


下一篇:彻底搞懂移动Web开发中的viewport与跨屏适配