小程序自界说实现loading 代码方式教程

<loading>{{正在加载…}}</loading> //内容也是可自界说的

效果图：

一、自界说实现效果图：

给网站文字添加图标-Font Awesome

给网站添加图标：FontAwesome 先贴上各种图标的网址：https://fontawesome.com/?from=io 1、打开网址，我们可以看到： 像我这种英语不好的，直接用谷歌浏览器进行翻译中文好了，自己还是有点B数的······翻译后： 2、我们先将这个网站的CSS样式添加到我们的网站中，点击“入门”，找到： 3、然后我们点击“图标”，我们找一个自己喜欢的图标： 就可以看到好多好多图...

二、代码实现：

1.loading 组件的view实<!– loading最先 –>

<em id="__mceDel">      <view class="loading" wx:if="{{loadingFlag}}">        <view class="loading_mask"></view>         <view class="weui-loadmore">           <view class="weui-loading"></view>           <text class="weui-loadmore__tips">正在加载</text>         </view>      </view>        <!-- loading竣事 --><br><br>挪用的页面组件实现：<br> 设置：</em>

{“usingComponents”: {“com-loading”:”../component/comLoading/loading”}}
挪用的页面挪用：(可以自界说加载时的文字显示)
<com-loading pro-content=”正在加载”></com-loading>2.组件js:

properties: {
    proContent:{
      type:String,
      value:"正在加载..."
    },
  },

3.css样式

/* loading样式最先 */ .loading{   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%; } .loading_mask{   position: absolute;   width: 45%;   margin: 14em 22.5%;   height: 2.6em;   border-radius: 20rpx;   background: #000;   opacity: .5; } .weui-loadmore {   position: absolute;   width: 45%;   margin: 16em 22.5%;   line-height: 2.6em;   font-size: 14px;   color: #fff;   text-align: center; } .weui-icon_toast.weui-loading{   margin:30px 0 0;   width:38px;   height:38px;   vertical-align:baseline; } .weui-loading{     width:20px;     height:20px;     display:inline-block;     vertical-align:middle;     -webkit-animation:weuiLoading 1s steps(12, end) infinite;     animation:weuiLoading 1s steps(12, end) infinite;     background:transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;     background-size:100%;   }   .weui-loading.weui-loading_transparent,   .weui-btn_loading.weui-btn_primary .weui-loading,   .weui-btn_loading.weui-btn_warn .weui-loading{     background-image:url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");   }   @-webkit-keyframes weuiLoading{     0%{     -webkit-transform:rotate3d(0, 0, 1, 0deg);         transform:rotate3d(0, 0, 1, 0deg);     }     100%{     -webkit-transform:rotate3d(0, 0, 1, 360deg);         transform:rotate3d(0, 0, 1, 360deg);     }   }   @keyframes weuiLoading{     0%{     -webkit-transform:rotate3d(0, 0, 1, 0deg);         transform:rotate3d(0, 0, 1, 0deg);     }     100%{     -webkit-transform:rotate3d(0, 0, 1, 360deg);         transform:rotate3d(0, 0, 1, 360deg);     }   } .weui-loadmore__tips {   display: inline-block;   vertical-align: middle;   color: rgba(0,0,0,0.9);   color: var(--weui-FG-0); }