微信原生封装一个简易的加载效果-Toy模板网

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

version1

微信原生封装一个简易的加载效果,HTML&CSS,微信,javascript,html5,css,前端
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

微信原生封装一个简易的加载效果,HTML&CSS,微信,javascript,html5,css,前端
loading.wxml

<!-- components/loading_v2/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-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文章来源地址https://www.toymoban.com/news/detail-540203.html

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

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

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