uni-app 微信小程序中使用微信开发者工具生成“骨架屏”，skeleton

废话不多说直接上效果

 效果展示结束了接下来告诉大家怎么去使用这个呢，其实我们微信开发者工具已经给我们提供了自动生成骨架屏的功能了：

 在编辑器-模拟器-右下角（‘...’） 点击之后呢我们就可以看到生成骨架屏的按钮了

点击以后他会告诉我们对应的提示

 点击确定

在对应的文件夹下方就生成了我们对应页面的骨架屏文件了。

 接下来我们怎么在uni-app 中使用他呢？

• 第一步哈，随便我们找个位置新建一下我们骨架屏的组件文件夹，这里我们在uni-app 文件目录中创建 ： common 文件夹，之后最创建对应组件的文件夹及VUE、CSS 文件

 

• 之后我们把微信小程序编辑器中生成的对应文件复制到我们新建的文件中 - 记得CSS引入

 这里我们需要注意的一个关键点！ 我们需要把代码中的这个玩意给注释掉，不然页面会报错

is="wxcomponents/dist/sticky/index"             就类似这种 只要带 is= 这样的

• 之后我们在home首页中呢注册组件并使用 

// 刚才我复制过来的骨架屏组件 一定要用 v-if 来判断是否显示
<loding-html v-if="lodingShow"></loding-html>

// 这个是我们页面的原来代码 用 v-else 来标识出来
<view v-else class="content">

// 引用组件
import lodingHtml from '../../common/home/index'


// 注册组件
components: {
    lodingHtml
},

// 设置变量控制是否显示隐藏
data() {
    return {
        lodingShow: true,
    };
},

• 之后再uni-app 生命周期中控制显示隐藏 

// 这里我用 onShow

onShow() {
    const vm = this

    // 方便下次再次显示骨架屏
    vm.lodingShow = true

    // 通过定时器控制 骨架屏幕

    //这里我们可以在请求列表的Ajax 成功之后设置隐藏
    setTimeout(function() {
        vm.lodingShow = false
    }, 1500)
},

•  这样我们的骨架屏幕就完成了. 最后在放出我们的效果图吧