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

小程序引入不同方式的icon
小程序引入不同方式的icon方法

<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>
<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);
}

猜你喜欢

2020年4月4日举行全国性哀悼，一键把网站变成灰色教程
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院今天发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。　各位网站站长，教你们把自己网站变灰色,哀悼！（用自己网站给你们做演示）下面是程序代码