热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Uniapp基础实战分类目录刷新WordPressrestapi实例(三)

Uni-app基础实战分类目录刷新WordPressrestapi实例哈还是老话题,本文章市wordpress博客的续文,从开始的首页文件接入数据,详情界面富文本解析,再到文本的分

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

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



  • Uni-app基础实战富文本框解析 WordPress rest api实例(二)

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


接口分析

分类接口: 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博客不同的主题会有不同得独立样式,在使用该源码的时候自己得在从新检测下


推荐阅读
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • 默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
  • 在Notepad++中配置Markdown语法高亮及实时预览功能
    本文详细介绍了如何在Notepad++中配置Markdown语法高亮和实时预览功能,包括必要的插件安装和设置步骤。 ... [详细]
  • 探讨如何在映射文件中处理重复的属性字段,以避免数据操作时出现错误。 ... [详细]
  • 为何Compose与Swarm之后仍有Kubernetes的诞生?
    探讨在已有Compose和Swarm的情况下,Kubernetes是如何以其独特的设计理念和技术优势脱颖而出,成为容器编排领域的领航者。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • 本文探讨了使用普通生成函数和指数生成函数解决组合与排列问题的方法,特别是在处理特定路径计数问题时的应用。文章通过详细分析和代码实现,展示了如何高效地计算在给定条件下不相邻相同元素的排列数量。 ... [详细]
  • 网络流24题——试题库问题
    题目描述:假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ... [详细]
  • 利用无代码平台实现高效业务应用开发
    随着市场环境的变化加速,全球企业都在探索更为敏捷的应用开发模式,以便快速响应新兴的商业机遇。然而,传统的软件开发方式不仅成本高昂,而且耗时较长,这往往导致IT与业务部门之间的合作障碍,进而影响项目的成功。本文将探讨如何通过无代码开发平台解决这些问题。 ... [详细]
  • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • 在日常生活中,支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现,帮助用户更好地管理个人财务,避免不必要的手续费支出。 ... [详细]
  • 我的读书清单(持续更新)201705311.《一千零一夜》2006(四五年级)2.《中华上下五千年》2008(初一)3.《鲁滨孙漂流记》2008(初二)4.《钢铁是怎样炼成的》20 ... [详细]
author-avatar
手机用户2502923513
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有