xyvcard-wechat-auth 0.0.29 → 0.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,6 +5,11 @@ Component({
|
|
|
5
5
|
* 组件的属性列表
|
|
6
6
|
*/
|
|
7
7
|
properties: {
|
|
8
|
+
// 是否开启字体渐变 白-黑
|
|
9
|
+
isGradient: {
|
|
10
|
+
type: Boolean,
|
|
11
|
+
value: false
|
|
12
|
+
},
|
|
8
13
|
// 标题
|
|
9
14
|
title: {
|
|
10
15
|
type: String,
|
|
@@ -14,6 +19,11 @@ Component({
|
|
|
14
19
|
isLeftIcon: {
|
|
15
20
|
type: Boolean,
|
|
16
21
|
value: true
|
|
22
|
+
},
|
|
23
|
+
// 字体的颜色
|
|
24
|
+
titleColor: {
|
|
25
|
+
type: String,
|
|
26
|
+
value: "#333"
|
|
17
27
|
}
|
|
18
28
|
},
|
|
19
29
|
/**
|
|
@@ -33,7 +43,7 @@ Component({
|
|
|
33
43
|
pageScrollTop: 0,
|
|
34
44
|
// 胶囊球的宽度
|
|
35
45
|
buttonWidth: getHeight().MenuButtonWidth,
|
|
36
|
-
//
|
|
46
|
+
// 背景透明色
|
|
37
47
|
color: ""
|
|
38
48
|
}
|
|
39
49
|
},
|
|
@@ -44,6 +54,47 @@ Component({
|
|
|
44
54
|
// 返回
|
|
45
55
|
handleBack() {
|
|
46
56
|
this.triggerEvent("eventBackTo");
|
|
57
|
+
},
|
|
58
|
+
// 计算导航栏透明度（供父组件调用）
|
|
59
|
+
calculateOpacity(scrollTop) {
|
|
60
|
+
let defaultTitleColorwhite = "#fff";
|
|
61
|
+
let defaultTitleColorBlack = "#333";
|
|
62
|
+
let color, titleColor;
|
|
63
|
+
if (scrollTop == 0) {
|
|
64
|
+
color = "rgba(255, 255, 255, 0)";
|
|
65
|
+
titleColor = this.properties.isGradient ? defaultTitleColorwhite : defaultTitleColorBlack;
|
|
66
|
+
} else if (scrollTop > 0 && scrollTop <= 10) {
|
|
67
|
+
color = "rgba(255, 255, 255, 0.1)";
|
|
68
|
+
titleColor = this.properties.isGradient ? defaultTitleColorwhite : defaultTitleColorBlack;
|
|
69
|
+
} else if (scrollTop >= 10 && scrollTop < 20) {
|
|
70
|
+
color = "rgba(255, 255, 255, 0.2)";
|
|
71
|
+
titleColor = this.properties.isGradient ? defaultTitleColorwhite : defaultTitleColorBlack;
|
|
72
|
+
} else if (scrollTop >= 20 && scrollTop < 30) {
|
|
73
|
+
color = "rgba(255, 255, 255, 0.3)";
|
|
74
|
+
titleColor = this.properties.isGradient ? defaultTitleColorwhite : defaultTitleColorBlack;
|
|
75
|
+
} else if (scrollTop >= 30 && scrollTop < 40) {
|
|
76
|
+
color = "rgba(255, 255, 255, 0.4)";
|
|
77
|
+
titleColor = this.properties.isGradient ? defaultTitleColorwhite : defaultTitleColorBlack;
|
|
78
|
+
} else if (scrollTop >= 40 && scrollTop < 50) {
|
|
79
|
+
color = "rgba(255, 255, 255, 0.5)";
|
|
80
|
+
titleColor = this.properties.isGradient ? defaultTitleColorwhite : defaultTitleColorBlack;
|
|
81
|
+
} else if (scrollTop >= 50 && scrollTop < 60) {
|
|
82
|
+
color = "rgba(255, 255, 255, 0.6)";
|
|
83
|
+
titleColor = this.properties.isGradient ? defaultTitleColorwhite : defaultTitleColorBlack;
|
|
84
|
+
} else if (scrollTop >= 60 && scrollTop < 70) {
|
|
85
|
+
color = "rgba(255, 255, 255, 0.7)";
|
|
86
|
+
titleColor = this.properties.isGradient ? defaultTitleColorwhite : defaultTitleColorBlack;
|
|
87
|
+
} else if (scrollTop >= 70 && scrollTop < 80) {
|
|
88
|
+
color = "rgba(255, 255, 255, 0.8)";
|
|
89
|
+
titleColor = this.properties.isGradient ? defaultTitleColorwhite : defaultTitleColorBlack;
|
|
90
|
+
} else {
|
|
91
|
+
color = "rgba(255, 255, 255, 1)";
|
|
92
|
+
titleColor = defaultTitleColorBlack;
|
|
93
|
+
}
|
|
94
|
+
this.setData({
|
|
95
|
+
"style.color": color,
|
|
96
|
+
titleColor
|
|
97
|
+
});
|
|
47
98
|
}
|
|
48
99
|
}
|
|
49
100
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
<view style="background-color: {{ style.color }};">
|
|
2
|
-
<view class="auth-top-navigation" style="padding-top: {{ style.paddingTop }}px; height: {{ style.height }}px;">
|
|
3
|
-
<
|
|
1
|
+
<view class="auth-top" style="background-color: {{ style.color }};">
|
|
2
|
+
<view class="auth-top-navigation" style="padding-top: {{ style.paddingTop }}px; height: {{ style.height }}px;color: {{ titleColor }}">
|
|
3
|
+
<van-icon name="arrow-left" size="22px" wx:if="{{ isLeftIcon }}" color="{{ titleColor }}" bind:tap="handleBack" />
|
|
4
4
|
<text class="title">{{ title }}</text>
|
|
5
5
|
</view>
|
|
6
6
|
</view>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.auth-top
|
|
1
|
+
.auth-top{position:fixed;left:0;top:0;right:0;z-index:99999;transition:opacity .2s ease}.auth-top-navigation{display:flex;align-items:center;padding:0 10px}.auth-top-navigation .title{flex:1;text-align:center;font-size:28rpx}
|