微信小程序组件实现加载中效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序组件实现加载中效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大家好哇，我是梦辛工作室的灵，我又来了=-=，最近项目开发中，需实现一个加载效果，上图给大家看下：
小程序加载中,微信小程序,JavaScript,微信小程序,javascript,小程序
感觉一般把，还是挺好写的，我就封装成了一个组件，方便大家以后使用，使用方法如下：

<loading color="颜色值" times="动画时长" count="多少跟划线" class="load_img" ></loading>

还是简单吧，原理其实也很简单，就是 n个正方形（中间一根线）旋转后就变成了，然后再加上一个透明度的动画
下面是组件源代码：
loading.js

// components/loading/loading.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    color:{
      type:String,
      value:"#0600BD"
    },
    times:{
      type:Number,
      value:5
    },
    count:{
      type:Number,
      value:30
    }
  }, 
  /**
   * 组件的初始数据
   */
  data: {
    countlist:[]
  },
  observers:{
    "count": function(count_new){
      let countlist = new Array(count_new).fill(0);
      this.setData({
        countlist
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})

//loading.wxml

<!--components/loading/loading.wxml-->
<view wx:for="{{countlist}}" wx:key="count" class="content flex_row flex_hcenter" style="transform: rotate({{(360 / countlist.length) * index}}deg);"> 
  <view class="line" style="background-color: {{color}};animation: colorset {{times}}s infinite {{(times * 1000/ countlist.length) * index}}ms;opacity: {{ 1 - (1/countlist.length) * index}};"></view>
</view>

loading.wxss

/* components/loading/loading.wxss */
.content{
  width: 100%;
  height: 100%; 
  border-radius: 50%;
  position: absolute;
}

.line{
  width: 2px;
  height: 16px;
  background: #ffffff;   
}

@keyframes colorset{
  from{
    opacity: 1;
  } 
  to{
    opacity: 0;
  } 
}


.flex_row, .flex_column {
  display: flex;
}

.flex_row {
  flex-direction: row;
}

.flex_column {
  flex-direction: column;
}

.flex_vcenter,.flex_center{
  align-items: center
}

.flex_hcenter,.flex_center{
  justify-content: center;
}

.flex_space{
  justify-content: space-between;
}
.flex_around{
  justify-content: space-around;
}
.flex_wrap{
  flex-wrap: wrap;
}
.flex_grow_1{
  flex-grow: 1;
}
.flex_end{
  align-items: flex-end;
  justify-content: flex-end;
}