5渲染判断if_新手可以这样写uniapp判断接口数据缺省页

时间：2024-12-17 11:56:45

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

唠叨一会

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

渲染数据

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

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

中添加posList数组

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

3.渲染文章列表

      {{  }}        {{  }}

判断缺省

中写2个布尔值一个是有数据情况下，一个是没有数据情况下

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

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

3.新建一个view给缺省

  没有数据咯！！！

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

onLoad() {  ({    url: '/wp-json/wp/v2/posts?page=19',    success: (res) => {       = res.data;      (res.data);      if( res.data.data.status == 400){         = false         = true        (11)      }    }  });},
因为wodpress的接口问题无法判断lenhgt，很奇葩，所以只能判断他返回的status来说明 
res.data.data.lenhgt == 0

总结

1.我们也可以使用v-show或者v-if和v-else来写对数据的判断是否缺省 2.最后的最后，我们应该去判断渲染后的列表是否为0，虽然直接判断接口也是可以的，那么希望文章对新手有一个帮助 彩泥西环：

新手制作uni-app小程序骨架原理(一)

uni-app 微信小程序跳转tabar导航界面无效处理方式

案例下载

链接: /s/1WQ2YbYx66FxYHdF0EpEg6g 

提取码: v6xi

相关文章