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

fengrui99

文章来自：https://www.frbkw.com/2874/

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


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

[Asm] 纯文本查看 复制代码

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

2.return中添加posList数组

[Asm] 纯文本查看 复制代码

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

3.渲染文章列表

[Asm] 纯文本查看 复制代码

<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>

判断缺省
1.return中写2个布尔值一个是有数据情况下，一个是没有数据情况下

[Asm] 纯文本查看 复制代码

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

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

[Asm] 纯文本查看 复制代码

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

3.新建一个view给缺省

[Asm] 纯文本查看 复制代码

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

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

[Asm] 纯文本查看 复制代码

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来说明

[Asm] 纯文本查看 复制代码

res.data.data.length == 0

linguo2625469

感谢转载
length都写错了  还在这写教程？
楼主转载之前也不看一遍文章？
res.data.data.lenhgt == 0
res.data.data.length== 0

mosou

并不需要再多写参数 直接用posList 就可以判断出是否有数据

无常方便面

linguo2625469 发表于 2020-6-30 10:43
感谢转载
length都写错了  还在这写教程？
楼主转载之前也不看一遍文章？

哈哈哈哈哈，我也是第一眼就看到lenght写错了，估计直接复制粘贴过来的

ssh806

学习一下了，不错

fengrui99

无常方便面 发表于 2020-6-30 11:06
哈哈哈哈哈，我也是第一眼就看到lenght写错了，估计直接复制粘贴过来的

哈哈还真是 我去通知修改

xidasheng

感谢楼主分享