html + vue + axios 加载内容时默认骨架设置；

html + vue + axios 加载内容时默认骨架设置；

html:

<template v-if="action == 'default'">{内容：}.....</template>

......

<template v-if="action == ''">

    <div class="skeleton"><img src="http://caitaitai.cdn.ekweixin.com/0ff29675bdded360dd25d536bdfcd7624d140278261-ZKkQOt_fw658.png" /></div>

</template>

js:

var app = new Vue({

    el: "#app",

    data: {

        firstload: false,//第一次items为空时，不执行，之后判断如果为空，执行；

        finished: false,

        loading: false,

        orders:{},//内容对象

       action:"",//默认骨架；

    },

    created: function () {

        this.getOrderList(1);//案例内容列表；

    },

    filters: {

        curreny: function (data) {

            data = Number(data).toFixed(2);

            return data;

        }

    },

    methods: {

    //案例：请求的方法；

    getOrderList:function (page) {

        var that=this;

        if(that.loading){return false;}

        that.loading = true;

        that.finished = false;

      //请求接口，返回内容添加赋值；

        axios.get('/api/purchases/lists',{params:{page:page,status:2}}).then(function (res) {

            that.loading = false;

            that.finished = true;

            //  console.log(res.data);

            if (res.data.code == 0) {

                that.orders = res.data.data;

                that.action='default';

            }else{

                that.$toast(res.data.message);

            }

        })

        },

    }

})

总结：vue 加载请求数据时避免留白，可以使用骨架占位；效果不错；