微信原生封装一个简易的加载效果

version1

loading.wxml

<view class="loading-container" wx:if="{{showLoading}}">
    <view class="loading-box">
        <image class="loading-img" src="../../static/images/img06.jpg" />
        <view class="loading-dots">
            <text>text>
            <text>text>
            <text>text>
            <text>text>
        view>
        <view class="loading-text">加载中...view>
    view>
view>

loading.wxss

/* components/loading_v1/loading.wxss */

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111111111111111;
  width: 100vw;
  height: 100vh;
  /* 毛玻璃效果 */
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.loading-box {
  width: 100vw;
  margin: 0 auto;
  margin-top: 18vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.loading-dots {
  margin-top: 60rpx;
  display: flex;
  justify-content: center;
}
.loading-dots text {
  display: inline-block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 8rpx;
  animation: fade-in 1.5s infinite;
}
.loading-dots text:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dots text:nth-child(3) {
  animation-delay: 0.4s;
}
.loading-dots text:nth-child(4) {
  animation-delay: 0.6s;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.loading-text {
  margin-top: 20rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #fff;
}

loading.js

// components/loading_v1/loading.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    showLoading: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {},
});

组件调用：

{  // index.json中引入组件
  "usingComponents": {
    "loadingone": "../../components/loading_v1/loading",
  }
}
// 使用组件
<loadingone id="loading"></loadingone>
// js控制加载效果的显示与隐藏
this.selectComponent("#loading").setData({
  showLoading: true,
});
setTimeout(() => {
  this.selectComponent("#loading").setData({
    showLoading: false,
  });
}, 5000);

version2

loading.wxml

<view class="loading-container" wx:if="{{showLoading}}">
    <view class="loading-box">
        
        <view class="loading-circle">view>
        <view class="loading-text">加载中...view>
    view>
view>

loading.wxss

/* components/loading_v2/loading.wxss */
.loading-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  z-index: 1111111111;
}

.loading-box {
  width: 80vw;
  margin: 0 auto;
  margin-top: 35vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading-circle {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 14rpx solid rgba(200, 200, 200, 0.5);
  border-top: 14rpx solid #eee;
  animation: loading-rotate 1s linear infinite;
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 40rpx;
  margin-top: 40rpx;
}

loading.js

// components/loading_v2/loading.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    showLoading: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {},
});