1. 源碼屋首頁
  2. 站長學院
  3. 搭建教程

小程序自定義實現loading 代碼方法教程

<loading>{{正在加載…}}</loading> //內容也是可自定義的

效果圖:

小程序自定義實現loading 代碼方法教程小程序自定義實現loading 代碼方法教程
一、自定義實現效果圖:

小程序自定義實現loading 代碼方法教程

小程序自定義實現loading 代碼方法教程

二、代碼實現:

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

猜你喜歡

本文由(源碼屋@)整理自網絡,如轉載請注明出處:http://www.jxorxu.icu/36479.html

本站發布的內容若侵犯到您的權益,請郵件聯系[email protected] ?刪除,我們將及時處理!

=========================================

本站大部分下載資源收集于網絡,不保證其完整性以及安全性,請下載后自行測試。

本站資源僅供學習和交流使用,版權歸資源原作者所有,請在下載后24小時之內自覺刪除。

若作商業用途,請購買正版,由于未及時購買和付費發生的侵權行為,與本站無關。

發表評論

登錄后才能評論

聯系我們

在線咨詢:點擊這里給我發消息

郵件:[email protected]

QR code
欢乐捕鱼人能赢话费么 怎么短线股票 浙江20选5开奖玩法 甘肃11选5前3直 股票行情中心 浙江20选5开奖规则 浙江体彩6十1杀号专家预测 腾讯分分彩免费计划 浙江20选5开奖软件 广西快乐双彩中奖计算 山西体彩十一选五玩法 排列五预测精准5注 炒股软件app哪个 吉林快三基本走势图片 对于5万元投资理财 云南快乐十分玩法与奖金 股票融资配资?