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
获取指定分类
拿到分类接口后可以直接在一个界面中直接循环所有的分类，但是枫瑞个人还是喜欢说在细分一点。按该博客的分类是移动端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 },
总结
上拉就不写了哈，大家看上次的文章。效果图
已知bug:
1.上拉加载页码会出现过大bug上拉无法点击得下拉一次恢复正常
2.console中报name未定义，原因来自wpclassify[ids[index]].name，但不影响
注意：
1.wp博客不同的主题会有不同得独立样式，在使用该源码的时候自己得在从新检测下