新手制作uni-app小程序骨架原理（一）转载自枫瑞博客[uniapp教程]

新手制作uni-app小程序骨架原理（一）转载自枫瑞博客[uniapp教程]

愿你自在地走在街上，眼镜里是世俗，笑容里面是坦荡，骨子里面是善良，心里是明月长安————新手制作uni-app小程序骨架原理（一）

 

唠叨一会

还是习惯在开头唠叨唠叨，在做星茫ui3.0的时候 就说要试试制作uni-app小程序骨架，在插件市场有这操作，熟悉了下实现的方式后，大部分分就是现插入一个view，然后填充背景色，等数据加载好或写一个定时器3秒后关闭这个view就好了。目前好像能想到做骨架最简单的方式也就这样了

说明

1.本文只是说明了一下定时器的方式实现一个骨架

2.说明原理，还没有写成插件，如果要用到产品上还是制作成插件，或者先去插件市场下载

效果预览

实现步骤

枫瑞只是在开始前写了2个view一个作为骨架，一个是正式内容，在用v-if来判断是否显示，打开界面的时候执行created生命周期，触发 this.reloadData()函数

在插件市场上有一些部分无法达到自己的需求，那么我们是可以自定义写一个骨架，分享原理后，枫瑞也在短期内分享出制作插件教程和如何自己写一个骨架

 

<template>
  <view>
    <view v-if="loading" class="bk skeleton"></view>
	<view v-if="kgd" class="kg"></view>
  </view>
</template>

<script>
export default {
 
  data() {
    return {
      loading: true,
      kgd:false
    }
  },
  created() {
    this.reloadData()
  },
  methods: {
    reloadData() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
		this.kgd     = true
      }, 3000)
    },
  },
}
</script>

<style>
.bk{
	height: 300upx;
	width: 90%;
	margin-left: 5%;
	background-color: #cccccc;
	border-radius: 20upx;
}
.kg{
	height: 300upx;
	width: 90%;
	margin-left: 5%;
	background: url(https://frbkw.com//wp-center/uploads/2020/02/1580981041-faa00d5b29ded9d.jpg);
	background-size: 100%;
	border-radius: 20upx;
}

.skeleton {
  animation: skeleton-blink 1.2s ease-in-out infinite;
}

@keyframes skeleton-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;