uniapp或Vue使用小程序开发者工具骨架屏skleton

方法：uniapp使用小程序开发者工具骨架屏skleton_uniapp skeleton_QianDuan_Dai的博客-CSDN博客

1.效果图：

效果还是非常不错的，主要是还不用自己添加类名

2.实现方法(1.小程序)：

1.微信开发者工具-点击生成骨架屏

2.引入生成的wxml和wxss <import src="trendIndex.skeleton.wxml"/> //1.引入

<template is="skeleton" wx-if="{{loading}}" /> //默认显示骨架屏

data: function data() {

return {
​
  loading: true,   //在data中定义loading: true

}}

//用view把原来的代码包裹起来写上v-else

最后数据请求后loading = false

：小程序的使用较为简单，生成-引用就行了，下面讲uniapp的使用方法

3.实现方法(2.uniapp)：

1.微信开发者工具-点击生成骨架屏（同上） 2.新建组件skeleton.vue

把生成的wxml复制粘贴，生成的wxss写在<style>标签里，这样一来就是一个完整的组件

3.在主页面引用

定义

使用

4.可能出现的问题： 1.报错：

1、可以删除生成文件中类似<view is="components/page">这样的代码，记得删掉对应的结尾标签，比较难找

2、删除view 中 带有 data-event-opts=”的属性

3、删除掉所有带有../本地引入图片的路径或者用 image标签代替

2.运行成功后手机预览一下，运行是好的但是预览样式是错乱的

解决：把主页面的css样式复制一份到组件样式中就好了

3.如果是自定义头部可以把生成的对应的代码删掉，微小的样式可以自己添加长宽大小

总结：自己在网上没百度到uniapp使用小程序生成的骨架屏，这个方法比较无脑，页面少还好，多了就不通用了，优点是生成的骨架屏非常漂亮，也不用手动去加类名，生成一个完美一个，而且网上有一些骨架屏组件使用起来会先闪烁原页面，体验不好。