新手制作uni-app小程序骨架原理(一)

新手制作uni-app小程序骨架原理(一)

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

新手制作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;
  }
}
</style>

 

分享到 :
相关推荐

uni-app框架微信小程序自动保存用户密码源码

念念不忘必有回响是假,枕边书,怀中猫,意中人是假;爱而不得,山海不可平才是事实;唠[...

uni-app将uni.downloadFile媒体下载保存到相册

看标题,大家就知道了,上次发布的文章把我们uni.downloadFile和uni....

星宿UI0.6 wordpress开源小程序微信小程序开发支持QQ端

直到后来看到你恋爱的样子才知道自己从来没有被你爱过标语星宿:山有木兮木有枝唠[&he...

uni星茫V3.1wordpress小程序开源支持留言收藏消息订阅

可惜遇见你时,太年轻,我双拳犹空,涉世尚浅,还以为时间漫长,此情可待,你却寂寂无声,...

发表评论

邮箱地址不会被公开。 必填项已用*标注

评论(1)