读心悦

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

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

2020年10月16日 87点热度 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日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

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

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
flutter canvas redux 随笔 JavaScript 闲谈 hook mysql node 小程序 悦读 taro vue Nginx 阅读 CSS react git Echarts
推荐文章
  1. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
  2. 微信小程序中自定义导航和地图定位
  3. css3 animation属性总汇
  4. 小程序全局和局部自定义导航栏样式
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号