Skip to content

Commit 2e653be

Browse files
dpp0507007insummer
dpp050700
authored and
7insummer
committed
fix: 修改loading组件可在指定区域内显示
1 parent c1fd635 commit 2e653be

File tree

11 files changed

+167
-100
lines changed

11 files changed

+167
-100
lines changed

‎dist/loading/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import computeOffset from '../behaviors/computeOffset';
22
Component({
33
behaviors: [computeOffset],
44
externalClasses: ['l-container-class', 'l-class'],
5+
options: {
6+
multipleSlots: true
7+
},
58
properties: {
69
// 显示与隐藏
710
show: {
@@ -81,4 +84,4 @@ Component({
8184
// do nothing……
8285
},
8386
}
84-
});
87+
});

‎dist/loading/index.wxml‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -35,36 +35,44 @@
3535
</block>
3636
</view>
3737
</view>
38-
<view wx:if="{{show && !fullScreen}}" class="l-class {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}">
39-
<block wx:if="{{custom}}">
40-
<slot />
41-
</block>
42-
<block wx:else>
43-
<view wx:if="{{type=='flash' || type=='change' || type=='flip'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
44-
<view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
45-
<view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
46-
<view wx:if="{{ type === 'circle'}}" class="spinner-circle {{'spinner-circle-' + size}}">
47-
<view class="spinner-container container1">
48-
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
49-
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
50-
<view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
51-
<view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
52-
</view>
53-
<view class="spinner-container container2">
54-
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
55-
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
56-
<view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
57-
<view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
58-
</view>
59-
<view class="spinner-container container3">
60-
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
61-
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
62-
<view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
63-
<view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
64-
</view>
65-
</view>
66-
<view wx:if="{{ type === 'rotate'}}">
67-
<view class="rotate rotate-{{size}}" style="border-color: {{color}};"></view>
38+
39+
<view wx:if="{{show && !fullScreen}}" style="position: relative">
40+
<slot name="content"/>
41+
<view class="inner-loading-container" style="background:{{bgColor}};opacity:{{opacity}};z-index:{{zIndex}}"></view>
42+
<view class="l-class loading-icon-container">
43+
<view class="{{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}">
44+
<block wx:if="{{custom}}">
45+
<slot />
46+
</block>
47+
<block wx:else>
48+
<view wx:if="{{type=='flash' || type=='change' || type=='flip'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
49+
<view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
50+
<view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
51+
<view wx:if="{{ type === 'circle'}}" class="spinner-circle {{'spinner-circle-' + size}}">
52+
<view class="spinner-container container1">
53+
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
54+
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
55+
<view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
56+
<view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
57+
</view>
58+
<view class="spinner-container container2">
59+
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
60+
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
61+
<view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
62+
<view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
63+
</view>
64+
<view class="spinner-container container3">
65+
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
66+
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
67+
<view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
68+
<view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
69+
</view>
70+
</view>
71+
<view wx:if="{{ type === 'rotate'}}">
72+
<view class="rotate rotate-{{size}}" style="border-color: {{color}};"></view>
73+
</view>
74+
</block>
75+
</view>
6876
</view>
69-
</block>
7077
</view>
78+

‎dist/loading/index.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.container-loading{position:fixed;height:100%;width:100%;top:0;left:0}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;height:100%}.spinner-flash-medium{width:60rpx;height:60rpx}.spinner-flash-mini{width:40rpx;height:40rpx}.spinner-flash-large{width:80rpx;height:80rpx}.spinner-flip-medium{width:60rpx;height:60rpx}.spinner-flip-mini{width:40rpx;height:40rpx}.spinner-flip-large{width:80rpx;height:80rpx}.spinner-change-medium{width:30rpx;height:30rpx}.spinner-change-mini{width:20rpx;height:20rpx}.spinner-change-large{width:50rpx;height:50rpx}.flash-spinner{position:relative}.flash-bounce1,.flash-bounce2{width:100%;height:100%;border-radius:50%;background-color:#3963bc;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.flash-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.flip-bounce1{background-color:#3963bc;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out}@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.change-spinner{width:240rpx;text-align:center}.change-bounce1{background-color:#3963bc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:-.32s;animation-delay:-.32s}.change-bounce2{background-color:#3963bc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:-.16s;animation-delay:-.16s}.change-bounce3{background-color:#3963bc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.spinner-circle{position:relative}.spinner-circle-mini{width:40rpx;height:40rpx}.spinner-circle-medium{width:60rpx;height:60rpx}.spinner-circle-large{width:70rpx;height:70rpx}.container1>view,.container2>view,.container3>view{border-radius:50%;position:absolute;background-color:#3963bc;-webkit-animation:bouncedelay4 1.2s infinite ease-in-out;animation:bouncedelay4 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.circle-mini{width:12rpx;height:12rpx}.circle-medium{width:15rpx;height:15rpx}.circle-large{width:20rpx;height:20rpx}.spinner-circle .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1s;animation-delay:-1s}.container1 .circle2{-webkit-animation-delay:-.9s;animation-delay:-.9s}.container2 .circle2{-webkit-animation-delay:-.8s;animation-delay:-.8s}.container3 .circle2{-webkit-animation-delay:-.7s;animation-delay:-.7s}.container1 .circle3{-webkit-animation-delay:-.6s;animation-delay:-.6s}.container2 .circle3{-webkit-animation-delay:-.5s;animation-delay:-.5s}.container3 .circle3{-webkit-animation-delay:-.4s;animation-delay:-.4s}.container1 .circle4{-webkit-animation-delay:-.3s;animation-delay:-.3s}.container2 .circle4{-webkit-animation-delay:-.2s;animation-delay:-.2s}.container3 .circle4{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes bouncedelay4{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay4{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.rotate{border-radius:50%;animation:rotate .7s linear infinite}.rotate-mini{height:40rpx;width:40rpx;border-top:6rpx solid #3963bc;border-right:6rpx solid transparent!important;border-bottom:6rpx solid #3963bc;border-left:6rpx solid #3963bc}.rotate-medium{height:50rpx;width:50rpx;border-top:6rpx solid #3963bc;border-right:6rpx solid transparent!important;border-bottom:6rpx solid #3963bc;border-left:6rpx solid #3963bc}.rotate-large{height:70rpx;width:70rpx;border-top:8rpx solid #3963bc;border-right:8rpx solid transparent!important;border-bottom:8rpx solid #3963bc;border-left:8rpx solid #3963bc}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
1+
.container-loading{position:fixed;height:100%;width:100%;top:0;left:0}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;height:100%}.spinner-flash-medium{width:60rpx;height:60rpx}.spinner-flash-mini{width:40rpx;height:40rpx}.spinner-flash-large{width:80rpx;height:80rpx}.spinner-flip-medium{width:60rpx;height:60rpx}.spinner-flip-mini{width:40rpx;height:40rpx}.spinner-flip-large{width:80rpx;height:80rpx}.spinner-change-medium{width:30rpx;height:30rpx}.spinner-change-mini{width:20rpx;height:20rpx}.spinner-change-large{width:50rpx;height:50rpx}.flash-spinner{position:relative}.flash-bounce1,.flash-bounce2{width:100%;height:100%;border-radius:50%;background-color:#3963bc;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.flash-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.flip-bounce1{background-color:#3963bc;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out}@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.change-spinner{width:240rpx;text-align:center}.change-bounce1{background-color:#3963bc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:-.32s;animation-delay:-.32s}.change-bounce2{background-color:#3963bc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:-.16s;animation-delay:-.16s}.change-bounce3{background-color:#3963bc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.spinner-circle{position:relative}.spinner-circle-mini{width:40rpx;height:40rpx}.spinner-circle-medium{width:60rpx;height:60rpx}.spinner-circle-large{width:70rpx;height:70rpx}.container1>view,.container2>view,.container3>view{border-radius:50%;position:absolute;background-color:#3963bc;-webkit-animation:bouncedelay4 1.2s infinite ease-in-out;animation:bouncedelay4 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.circle-mini{width:12rpx;height:12rpx}.circle-medium{width:15rpx;height:15rpx}.circle-large{width:20rpx;height:20rpx}.spinner-circle .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1s;animation-delay:-1s}.container1 .circle2{-webkit-animation-delay:-.9s;animation-delay:-.9s}.container2 .circle2{-webkit-animation-delay:-.8s;animation-delay:-.8s}.container3 .circle2{-webkit-animation-delay:-.7s;animation-delay:-.7s}.container1 .circle3{-webkit-animation-delay:-.6s;animation-delay:-.6s}.container2 .circle3{-webkit-animation-delay:-.5s;animation-delay:-.5s}.container3 .circle3{-webkit-animation-delay:-.4s;animation-delay:-.4s}.container1 .circle4{-webkit-animation-delay:-.3s;animation-delay:-.3s}.container2 .circle4{-webkit-animation-delay:-.2s;animation-delay:-.2s}.container3 .circle4{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes bouncedelay4{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay4{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.rotate{border-radius:50%;animation:rotate .7s linear infinite}.rotate-mini{height:40rpx;width:40rpx;border-top:6rpx solid #3963bc;border-right:6rpx solid transparent!important;border-bottom:6rpx solid #3963bc;border-left:6rpx solid #3963bc}.rotate-medium{height:50rpx;width:50rpx;border-top:6rpx solid #3963bc;border-right:6rpx solid transparent!important;border-bottom:6rpx solid #3963bc;border-left:6rpx solid #3963bc}.rotate-large{height:70rpx;width:70rpx;border-top:8rpx solid #3963bc;border-right:8rpx solid transparent!important;border-bottom:8rpx solid #3963bc;border-left:8rpx solid #3963bc}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.inner-loading-container{position:absolute;width:100%;left:0;height:100%;top:0}.loading-icon-container{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

‎examples/dist/loading/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import computeOffset from '../behaviors/computeOffset';
22
Component({
33
behaviors: [computeOffset],
44
externalClasses: ['l-container-class', 'l-class'],
5+
options: {
6+
multipleSlots: true
7+
},
58
properties: {
69
// 显示与隐藏
710
show: {
@@ -81,4 +84,4 @@ Component({
8184
// do nothing……
8285
},
8386
}
84-
});
87+
});

0 commit comments

Comments
 (0)