新手uni-app判断接口数据显示数据或者缺省页

新手uni-app判断接口数据显示数据或者缺省页

“在你之前,我没有一件像样的心事。” “在你之后,我没有拿得出手的痛苦”

新手uni-app判断接口数据显示数据或者缺省页

唠叨一会

很久没有写Uni的教程啦!这文章同样还是针对新手入门缺省页的一篇文章,采用最基础的思路和写法。希望能文章能给新手带来思路。思路说明:通过接口返回的数据lenhgt是否为0来来判断v-if的显示,我们使用page参数为例子,枫瑞博客 分页只有15页上下左右,所以当我们修改page参数为19的时候他就没有内容,我们旧的给他显示一个缺省图,为了偷懒枫瑞直接用文字了

渲染数据

1.首先我使用wodpress博客的api接口发起一个文章列表请求

onLoad() {
	uni.request({
		url: 'https://www.frbkw.com/wp-json/wp/v2/posts?page=1',
			success: (res) => {
				this.posList = res.data;
		}
	});
},

2.return中添加posList数组

data() {
	return {
		posList: []
	}
},

3.渲染文章列表

<view class="pos-w" v-for="(pos, index) in posList" :key="index">
	<view class="pos-title">
		{{ pos.title.rendered }}
	</view>
	<view class="pos-title-h">
		{{ pos.excerpt.rendered }}
	</view>
</view>

新手uni-app判断接口数据显示数据或者缺省页

判断缺省

1.return中写2个布尔值一个是有数据情况下,一个是没有数据情况下

data() {
	return {
		posList: [],
		isdata:true,
		nodata:false
	}
},

2.在循环列表中添加一个v-if=”isdata”判断

<view class="pos-w" v-for="(pos, index) in posList" :key="index" v-if="isdata">

3.新建一个view给缺省

<view class="no-data" v-if="nodata">
	没有数据咯!!!
</view>

4.我们在加载发起的请求中添加一个判断

onLoad() {
	uni.request({
		url: 'https://www.frbkw.com/wp-json/wp/v2/posts?page=19',
		success: (res) => {
			this.posList = res.data;
			console.log(res.data);
			if( res.data.data.status == 400){
				this.isdata = false
				this.nodata = true
				console.log(11)
			}
		}
	});
},

因为wodpress的接口问题无法判断,很奇葩,所以只能判断他返回的status来说明

res.data.data.length== 0

新手uni-app判断接口数据显示数据或者缺省页

总结

1.最后的最后,我们应该去判断渲染后的列表是否为0,虽然直接判断接口也是可以的,那么希望文章对新手有一个帮助

推举:

Vue实战-开发移动端音乐WebApp

MUI全套视频教程 MUI实战项目源码 仿携程APP

案例下载

链接: https://pan.baidu.com/s/1WQ2YbYx66FxYHdF0EpEg6g 提取码: v6xi

欢迎关注我们微信公众号哦

新手uni-app判断接口数据显示数据或者缺省页

    分享到 :
    相关推荐

    新手uni-app引入css3动画Animate.css库

    新手uni-app引入css3动画Animate.css库,animate.css是...

    MUI全套视频教程 MUI实战项目源码 仿携程APP

    MUI全套视频教程MUI项目源码仿携程APP轻量追求性能体验,是我们开始启动[&he...

    腾讯课堂uni-app商业级应用实战百度云网盘

    uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码[&...

    uni-app 简单粗暴自己手写Steps 步骤条

    uni-app 是一个使用 Vue.js开发所有前端应用的框架,开发者编写一套代码[...

    发表评论

    邮箱地址不会被公开。 必填项已用*标注

    评论(1)

    • 萧子升 普通用户 07/18/2020

      不错看看