小程序自定義實現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);} |
如果您的問題還未解決可以聯系站長付費協助。
有問題可以加入技術QQ群一起交流學習
本站vip會員 請加入無憂模板網 VIP群（50604020） PS:加入時備注用戶名或昵稱
普通注冊會員或訪客 請加入無憂模板網 技術交流群（50604130）
客服微信號：15898888535
聲明：本站所有文章資源內容，如無特殊說明或標注，均為采集網絡資源。如若內容侵犯了原著者的合法權益，可聯系站長刪除。
