vant组件移动端遮罩层

59 阅读 0 评论 39 点赞

我是靠谱客的博主笨笨人生，最近开发中收集的这篇文章主要介绍vant组件移动端遮罩层，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在进入页面之前，页面的数据请求渲染需要一定的时间，这时需要加一个遮罩层处理，让页面变的更好看一点，等数据都获取到了，再让用户看见

<van-loading class="loading" v-if="loading" />

<!-- 内容 -->

每当调取接口的时候，就要设置一下 loading 为 false，获取到了数据就再设为 true，实例如下：

    //data中
    loading:false,
    dataDetail:{}

    //methods中
    //获取数据
    getData() {
      this.loading = true //当开始调用获取数据的方法是，启用遮罩层
      getDataApi().then((res) => {
        this.dataDetail= res.data.data
        this.loading = false //当数据获取到了，关闭遮罩层
      })
    },