LL - 我的导航栏问题

app.js

@@ -35,14 +35,13 @@ App({
     onLaunch: function () {
         this.setUnitProportion()
         this.login()
+
+        if (this.globalData.token === '') return
+        this.queryUserStatus()
     },
 
     onShow: function () {
-        console.log('onShow')
         this.setAppStatus()
-
-        if (this.globalData.token === '') return
-        this.queryUserStatus()
     },
 
     setAppStatus: function () {
@@ -55,6 +54,8 @@ App({
             success: (response) => {
                 let funcResponse = response.data
                 this.globalData.appStatus = Boolean(Number(funcResponse[0].value))
+                // 测试数据
+                this.globalData.appStatus = true
                 console.log(this.globalData.appStatus)
             }
         })

component/navigation/navigation.js

@@ -77,6 +77,11 @@ Component({
 
     // 属性监听
     observers: {
+        'scrollStyle': function (funcValue) {
+            console.log(this.data.scrollStyle)
+            if (JSON.stringify(this.data.scrollStyle) === '{}') return
+            this.setNavigationStyle()
+        },
         'background': function () {
             this.setNavigationStyle()
         },
@@ -138,6 +143,7 @@ Component({
                 funcTitleStyle['background'] = this.data.isScrollChange ? this.data.scrollStyle.change.background : this.data.scrollStyle.normal.background
 
                 this.setData({
+                    color: this.data.isScrollChange ? this.data.scrollStyle.change.color : this.data.scrollStyle.normal.color,
                     backIcon: this.data.isScrollChange ? this.data.scrollStyle.change.backIcon : this.data.scrollStyle.normal.backIcon
                 })
             }

pages/mine/home/home.js

@@ -6,19 +6,7 @@ Page({
 
     data: {
         // 导航栏相关属性
-        navigationStyle: {
-            normal: {
-                backIcon: '',
-                color: '#FFFFFF',
-                background: 'rgba(255, 255, 255, 0)'
-            },
-            change: {
-                backIcon: '',
-                color: '#000000',
-                background: 'rgba(255, 255, 255, 1)'
-            },
-            scroll: '400rpx',
-        },
+        navigationStyle: {},
         navigationScroll: 0,
 
 
@@ -91,6 +79,7 @@ Page({
     onShow: function () {
         this.setData({ appStatus: App.globalData.appStatus })
         this.setUserInfo()
+        this.setNavigation()
     },
 
     // 去活动预约列表
@@ -357,6 +346,26 @@ Page({
         }
     },
 
+    setNavigation: function () {
+        let funcUserInfo = wx.getStorageSync('userInfo')
+        let funcNavigation = {
+            normal: {
+                backIcon: '',
+                color: funcUserInfo.userType === 0 ? '#000000' : '#FFFFFF',
+                background: 'rgba(255, 255, 255, 0)'
+            },
+            change: {
+                backIcon: '',
+                color: '#000000',
+                background: 'rgba(255, 255, 255, 1)'
+            },
+            scroll: '300rpx',
+        }
+        this.setData({
+            navigationStyle: funcNavigation
+        })
+    },
+
     // 登录注册页
     checkRegister() {
         if (this.data.isRegister) {
@@ -591,8 +600,6 @@ Page({
     },
 
     onPageScroll: function (event) {
-        console.log(this.scrollLock)
-
         // 优化滚动事件触发频率
         if (this.scrollLock) return
         this.scrollLock = true
@@ -600,9 +607,7 @@ Page({
         this.setData({
             navigationScroll: event.scrollTop
         })
-
-        console.log(this.data.navigationScroll)
-
+        
         // 恢复滚动事件
         this.scrollTimer = setTimeout(() => {
             this.scrollLock = false

pages/mine/home/home.wxss

 .container {
     min-height: 100vh;
-    background: #F3F4F6
+    background: #f3f4f6;
 }
 
 .navigation {
@@ -17,19 +17,26 @@
 }
 
 .mine {
-    position: relative;
     width: 750rpx;
     height: 380rpx;
     padding: 220rpx 0 0 48rpx;
 }
 
+.mine-bgi {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 750rpx;
+    height: 500rpx;
+}
+
 .user-type {
     width: 126rpx;
     height: 40rpx;
     font-weight: 500;
     font-size: 22rpx;
     color: #fff;
-    background-color: #6783AE;
+    background-color: #6783ae;
     text-align: center;
     line-height: 40rpx;
     border-radius: 4rpx;
@@ -55,14 +62,15 @@
     justify-content: center;
     align-items: center;
     border-radius: 50%;
-    background-color: #F0DABB;
+    background-color: #f0dabb;
 }
 
-.mine-avatar>image {
+.mine-avatar > image {
     width: 128rpx;
     height: 128rpx;
     border-radius: 50%;
 }
+
 .mine-info {
     padding-top: 12rpx;
 }
@@ -79,14 +87,14 @@
 }
 
 /* 积分 */
+
 .integral {
-    color: #0D0D0E;
+    color: #0d0d0e;
     text-align: right;
 }
 
-
 .glod {
-    color: #F0DABB;
+    color: #f0dabb;
 }
 
 .integral-num {
@@ -131,6 +139,7 @@
 }
 
 .coupon {
+    z-index: 9;
     width: 670rpx;
     height: 176rpx;
     padding: 41rpx 32rpx;
@@ -146,13 +155,13 @@
 .cpopon-info text:nth-child(1) {
     font-size: 34rpx;
     font-weight: 600;
-    color: #15191F;
+    color: #15191f;
 }
 
 .cpopon-info text:nth-child(2) {
     margin-top: 12rpx;
     font-size: 26rpx;
-    color: #161A1F;
+    color: #161a1f;
 }
 
 .coupon image {
@@ -161,6 +170,7 @@
 }
 
 .status {
+    z-index: 9;
     width: 670rpx;
     height: 130rpx;
     margin-top: 48rpx;
@@ -415,13 +425,13 @@
 
 .order-activity-title {
     font-size: 34rpx;
-    color: #15191F;
+    color: #15191f;
     font-weight: 600;
 }
 
 .order-activity-all text {
     font-size: 26rpx;
-    color: #15191F;
+    color: #15191f;
 }
 
 .order-activity-icon-list {
@@ -437,7 +447,7 @@
     position: relative;
     width: 80rpx;
     height: 80rpx;
-    background-color: #F5F6F8;
+    background-color: #f5f6f8;
     border-radius: 50%;
 }
 
@@ -456,7 +466,7 @@
     color: #fff;
     text-align: center;
     line-height: 32rpx;
-    background-color: #E66060;
+    background-color: #e66060;
     border-radius: 16rpx;
 }
 
@@ -467,7 +477,7 @@
 .order-activity-icon-wrapper text {
     margin-top: 16rpx;
     font-size: 22rpx;
-    color: #15191F;
+    color: #15191f;
 }
 
 .more-wrapper {
@@ -481,7 +491,7 @@
     margin-top: 41rpx;
     padding: 26rpx 32rpx;
     color: #fff;
-    background: linear-gradient(141deg, #F4D5C1 0%, #FA99CE 100%);
+    background: linear-gradient(141deg, #f4d5c1 0%, #fa99ce 100%);
     border-radius: 4rpx;
     opacity: 0.81;
 }
@@ -522,8 +532,6 @@
     height: 50rpx;
 }
 
-
-
 .pass-logo-wrapper text {
     height: 50rpx;
     margin-left: 20rpx;
@@ -556,7 +564,7 @@
     width: 606rpx;
     height: 328rpx;
     padding: 0 32rpx 8rpx;
-    background-color: #F5F6F8;
+    background-color: #f5f6f8;
     border-radius: 4rpx;
 }
 
@@ -570,7 +578,7 @@
     height: 100rpx;
     margin-left: 20rpx;
     font-size: 26rpx;
-    color: #15191F;
+    color: #15191f;
     line-height: 100rpx;
 }
 
@@ -588,7 +596,7 @@
 
 .goods-content text {
     font-size: 30rpx;
-    color: #15191F;
+    color: #15191f;
     font-weight: 600;
     line-height: 42rpx;
 }
@@ -599,7 +607,7 @@
 
 .goods-footer text {
     font-size: 26rpx;
-    color: #959DA9;
+    color: #959da9;
 }
 
 .art-logo {
@@ -614,7 +622,7 @@
     height: 248rpx;
     margin-top: 68rpx;
     padding: 72rpx 32rpx 0;
-    background-color: #F5F6F8;
+    background-color: #f5f6f8;
     border-radius: 4rpx;
 }
 
@@ -645,7 +653,7 @@
 }
 
 .appointment-activity-title {
-    color: #15191F;
+    color: #15191f;
     font-size: 30rpx;
     font-weight: 600;
     line-height: 42rpx;
@@ -653,7 +661,7 @@
 
 .appointment-activity-num {
     margin-top: 16rpx;
-    color: #959DA9;
+    color: #959da9;
     font-size: 26rpx;
 }
 
@@ -665,7 +673,7 @@
 .border-right {
     width: 1rpx;
     height: 75rpx;
-    background-color: #E2E7EF;
+    background-color: #e2e7ef;
 }
 
 .appointment-subscribe {
@@ -686,7 +694,7 @@
 
 .more text {
     font-size: 26rpx;
-    color: #15191F;
+    color: #15191f;
 }
 
 .more image {
@@ -706,7 +714,7 @@
 
 .service text {
     font-size: 34rpx;
-    color: #15191F;
+    color: #15191f;
     font-weight: 600;
 }
 
@@ -736,4 +744,4 @@ image {
 .logo-box image {
     max-width: 100% !important;
     max-height: 100% !important;
-}
\ No newline at end of file
+}