Skip to content

Commit 50fd7f1

Browse files
dpp0507007insummer
dpp050700
authored and
7insummer
committed
fix: 修改loading组件外部样式类l-class使用问题（#544） (#553)
1 parent 2a77b32 commit 50fd7f1

File tree

8 files changed

+44
-44
lines changed

8 files changed

+44
-44
lines changed

‎dist/loading/index.wxml‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<view class="container-loading l-container-class {{fullScreen ? 'content': ''}}" wx:if="{{show && fullScreen}}" style="background:{{bgColor}};opacity:{{opacity}};z-index:{{zIndex}}" catchtouchmove="doNothingMove">
2-
<view wx:if="{{show}}"
3-
class=" {{type=='flash'?'l-class':''}} {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}"
2+
<view wx:if="{{show}}"
3+
class="l-class {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}"
44
style="margin-bottom:{{distance}}px">
55
<block wx:if="{{custom}}">
66
<slot />
77
</block>
88
<block wx:else>
9-
<view style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
10-
<view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
11-
<view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
12-
<view class="spinner-circle {{'spinner-circle_' + size}}" wx:if="{{ type === 'circle'}}">
9+
<view wx:if="{{type=='flash' || type=='change' || type=='flip'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
10+
<view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
11+
<view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
12+
<view class="spinner-circle {{'spinner-circle-' + size}}" wx:if="{{ type === 'circle'}}">
1313
<view class="spinner-container container1">
1414
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
1515
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
@@ -35,15 +35,15 @@
3535
</block>
3636
</view>
3737
</view>
38-
<view wx:if="{{show && !fullScreen}}" class=" {{type=='flash'?'l-class':''}} {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}">
38+
<view wx:if="{{show && !fullScreen}}" class="l-class {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}">
3939
<block wx:if="{{custom}}">
4040
<slot />
4141
</block>
4242
<block wx:else>
43-
<view style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
44-
<view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
45-
<view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
46-
<view wx:if="{{ type === 'circle'}}" class="spinner-circle {{'spinner-circle_' + size}}">
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}}">
4747
<view class="spinner-container container1">
4848
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
4949
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
@@ -67,4 +67,4 @@
6767
<view class="rotate rotate-{{size}}" style="border-color: {{color}};"></view>
6868
</view>
6969
</block>
70-
</view>
70+
</view>

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

‎examples/dist/loading/index.wxml‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<view class="container-loading l-container-class {{fullScreen ? 'content': ''}}" wx:if="{{show && fullScreen}}" style="background:{{bgColor}};opacity:{{opacity}};z-index:{{zIndex}}" catchtouchmove="doNothingMove">
2-
<view wx:if="{{show}}"
3-
class=" {{type=='flash'?'l-class':''}} {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}"
2+
<view wx:if="{{show}}"
3+
class="l-class {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}"
44
style="margin-bottom:{{distance}}px">
55
<block wx:if="{{custom}}">
66
<slot />
77
</block>
88
<block wx:else>
9-
<view style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
10-
<view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
11-
<view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
12-
<view class="spinner-circle {{'spinner-circle_' + size}}" wx:if="{{ type === 'circle'}}">
9+
<view wx:if="{{type=='flash' || type=='change' || type=='flip'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
10+
<view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
11+
<view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
12+
<view class="spinner-circle {{'spinner-circle-' + size}}" wx:if="{{ type === 'circle'}}">
1313
<view class="spinner-container container1">
1414
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
1515
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
@@ -35,15 +35,15 @@
3535
</block>
3636
</view>
3737
</view>
38-
<view wx:if="{{show && !fullScreen}}" class=" {{type=='flash'?'l-class':''}} {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}">
38+
<view wx:if="{{show && !fullScreen}}" class="l-class {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}">
3939
<block wx:if="{{custom}}">
4040
<slot />
4141
</block>
4242
<block wx:else>
43-
<view style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
44-
<view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
45-
<view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="l-class {{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
46-
<view wx:if="{{ type === 'circle'}}" class="spinner-circle {{'spinner-circle_' + size}}">
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}}">
4747
<view class="spinner-container container1">
4848
<view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
4949
<view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
@@ -67,4 +67,4 @@
6767
<view class="rotate rotate-{{size}}" style="border-color: {{color}};"></view>
6868
</view>
6969
</block>
70-
</view>
70+
</view>

0 commit comments

Comments
 (0)