吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 2995|回复: 2
收起左侧

[其他转载] Uni-app基础实战分类目录刷新 WordPress rest api实例

[复制链接]
fengrui99 发表于 2019-6-20 10:30
原文来自枫瑞网地址:https://www.frbkw.com/1727/

哈还是老话题,本文章市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 QQ20190508100722.png 获取指定分类拿到分类接口后可以直接在一个界面中直接循环所有的分类,但是枫瑞个人还是喜欢说在细分一点。按该博客的分类是移动端UI框架下会有2个子分类mui和uni。于是就把移动端ui框架做单页,这个界面至显示mui和uni。前提是我们先获取一个模板顶部滚动模板,官方或者下载插件都可以。首先onload中添加一个函数,为了方便也写了一个下拉的
[Asm] 纯文本查看 复制代码
onLoad () {
			this.classifywp();//获取分类
			this.getnewsList();//下拉刷新
},
随后methods中执行函数
[Asm] 纯文本查看 复制代码
methods: {
     // 分类目录接口
	classifywp(){
			uni.request({
			url: 'https://www.frbkw.com/wp-json/wp/v2/categories',
			success: res => {
					this.wpclassify=res.data;
			        },
			});
	},
}
return中绑定下wpclassify,我们还是去建立一个筛选的制定分类为ids。大概意思就是一组人,我们先把小组人全部点名一次,随后我们在挑选出几个(其实哇,写不来过滤就用这个方式简单点哎),其中ids里面的0和1分类代表分类的id
[Asm] 纯文本查看 复制代码
return {
		wpclassify:'',
		ids:[0,1],
};
我们只要选择ids 在从wpclassify中拿数据(有使用组件)
[Asm] 纯文本查看 复制代码
<!-- 组件样式 -->
		<scroll-view scroll-x class="bg-white nav text-center">
			<!-- 获取分类目录 -->
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in ids" :key="index" @tap="tabSelect" :data-id="index" >
				{{wpclassify[ids[index]].name}}
			</view>			
		</scroll-view>

这样我们就可以看到分类了咯,因为一个界面下有2个分类,那么他要分开显示和分开刷新。组件中的有一个TabCur值,可以用它来显示不同分类下内容
[Asm] 纯文本查看 复制代码
<view v-show="TabCur==0">我是第一个分类><view>
<view v-show="TabCur==1">我是第二个分类><view>
分类刷新同理我们采用以上方法去刷新我们的内容。添加下拉函数
[Asm] 纯文本查看 复制代码
onPullDownRefresh () {
			//下拉刷新的时候请求一次数据
			this.getnewsList();
		},
不要忘记在psges.json中要开启下拉
[Asm] 纯文本查看 复制代码
{
			"path": "pages/kaifa/kaifa",
			"style": {
				"navigationBarTitleText": "移动端框架",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true //我是开启下拉刷新
			}
		},
methods中开始写函数,用if去判断
[Asm] 纯文本查看 复制代码
//接口下拉刷新
			getnewsList: function() {//第一次回去数据
			   // 判断分类刷新
				if (this.TabCur==0) {
					page = 1;
					uni.showNavigationBarLoading();
					uni.request({
					    url: 'https://www.frbkw.com/wp-json/wp/v2/posts?categories=5&page=1',
					    success: res => {						
					        page++;//得到数据之后page+1
					        this.wpmui = res.data;
					        uni.hideNavigationBarLoading();
					        uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					    }
					});
				} else if (this.TabCur==1) {
					page = 1;
					uni.showNavigationBarLoading();
					uni.request({
					    url: 'https://www.frbkw.com/wp-json/wp/v2/posts?categories=92&page=1',
					    success: res => {						
					        page++;//得到数据之后page+1
					        this.wpuniapp = res.data;
					        uni.hideNavigationBarLoading();
					        uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					    }
					});
				}
			},
QQ201905081041.png

免费评分

参与人数 2吾爱币 +4 热心值 +2 收起 理由
amigo360 + 2 + 1 大佬热心帮帮忙
苏紫方璇 + 2 + 1 鼓励转贴优秀软件安全工具和文档!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

yecaxi 发表于 2019-6-20 21:35
不错,一直关注着你!
amigo360 发表于 2019-7-22 06:58
安装了个主题出现   “TypeError: Cannot read property 'enable' of null”大佬可以帮忙解决下吗?
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-3-28 20:35

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表