读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

小程序自定义loading组件【源码】

2020年10月16日 218点热度 0人点赞 0条评论

效果图:小程序自定义loading组件【源码】插图

自定义loading组件wxml源码:

 

<view class="loading" wx:if="{{show}}">
  <text></text>
  <text></text>
  <text></text>
  <text></text>
  <text></text>
</view>

 

wxss:

.loading {
  width: 100px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.loading   text {
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  animation: load 1s ease infinite;
}

.loading text:nth-child(2) {
  animation-delay: 0.2s;
}

.loading text:nth-child(3) {
  animation-delay: 0.4s;
}

.loading  text:nth-child(4) {
  animation-delay: 0.6s;
}

.loading  text:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes load {
  0%, 100% {
    height: 40px;
    background: lightgreen;
  }

  50% {
    height: 70px;
    margin: -15px 0;
    background: lightblue;
  }
}

js:

Component({
  properties: {
    show: {
      type: Boolean,
      value: true,
    },
   
  },
  data: {
   
  },
  methods: {
   
  }
})

 

在引入该组件的时候,设置属性show,也就是向loading组价传递参数,判断loading组件什么时候展示和隐藏

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年10月16日

读心悦

韦永愿的个人博客

打赏 点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
hook JavaScript mysql vue canvas 随笔 react Echarts redux node flutter CSS taro 小程序 git 悦读 闲谈 阅读 Nginx
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
dart的List类 ubuntu设置mysql用户密码 React事件绑定 小程序自定义简易的提示组件 react Hook 设置定时器的问题 人为什么会痛苦呢?

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号