微信小程序--首页加载界面demo

效果图

代码

wxml

<!-- loading.wxml -->
<view class="loading">
  <view class="dot" animation="{{alpha[0]}}"></view>
  <view class="dot" animation="{{alpha[1]}}"></view>
  <view class="dot" animation="{{alpha[2]}}"></view>
  <view class="dot" animation="{{alpha[3]}}"></view>
  <view class="dot" animation="{{alpha[4]}}"></view>
</view>

wxss

page{
   background-image: url(https://wx1.sinaimg.cn/mw690/006cV2kkly1g8yh51dwplj30yi22on16.jpg);
  background-size: cover;
}

/** loading.wxss **/
.loading {
  width: 100%;
  position: absolute;
  bottom: 150rpx;
  justify-content: center;
  text-align: center;
}
 
.loading .dot{
  background-color:aquamarine;
  display: inline-block;
  /**圆点大小在这里设置，高宽一致，圆角值为高宽的一半**/
  width: 16rpx;
  height: 16rpx;
  border-radius: 8rpx;
  margin: 0 10rpx;
  opacity: 0;
}

js

/* loading.js */
Page({
  data: {
    alpha: [1, 1, 1, 1, 1]
  },
  onLoad: function () {
    var self = this;
    var _index = 0;
    var _alpha = self.data.alpha;
    var _speed = 500;
    var timer = setInterval(function () {
      var an_show = wx.createAnimation({});
      var an_hide = wx.createAnimation({});
      an_show.opacity(1).step({ duration: _speed });
      an_hide.opacity(0).step({ duration: _speed });
      _alpha[_index] = an_show;
      _alpha[_index == 0 ? 4 : _index - 1] = an_hide;
      self.setData({
        alpha: _alpha
      })
      _index = _index == 4 ? 0 : _index + 1;
    }, _speed);
  }
})