欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vant制作首页的加载中和暂无数据

程序员文章站 2022-06-07 18:08:28
...
<!-- 判断每一页是否有数据,没有则返回暂无数据 -->
 <div v-if="newsItems[index].list.length > 0"> </div>

 vant制作首页的加载中和暂无数据

vant制作首页的加载中和暂无数据  

首先先给数据添加一层div判断是否此页能请求到对应数量的数组,能请求则输出

        <!-- 页面加载 -->
        <div class="loading" v-else-if="newsItems[index].forward ==='before'">
          加载中。。。。
        </div>
        <div class="loading" v-else>
          暂无数据
        </div>

这两个div则判断状态为before还是after,这个状态的用处就是在点击后还没请求到数据的这个过程显示加载中,否则就为暂无数据例如下图:

vant制作首页的加载中和暂无数据

 完整效果如下图所示

vant制作首页的加载中和暂无数据