细节完善

src/pages/rank-list.vue

@@ -11,6 +11,7 @@ const isIos = ref(true);
 const selectedIndex = ref(0);
 const currentList = ref([]);
 const myData = ref(null);
+const headerColor = ref("");
 
 onMounted(async () => {
   const deviceInfo = uni.getDeviceInfo();
@@ -36,18 +37,28 @@ const handleSelect = (index) => {
   );
 };
 
+const onScrollView = (e) => {
+  headerColor.value = e.detail.scrollTop > 100 ? "orange" : "";
+  console.log(1111, e.detail);
+};
+
 const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
 </script>
 
 <template>
-  <view class="container">
-    <navigator
-      open-type="navigateBack"
-      class="back-btn"
-      :style="{ top: `${isIos ? 55 : 45}px` }"
+  <scroll-view class="container" scroll-y @scroll="onScrollView">
+    <view
+      class="header"
+      :style="{
+        paddingTop: isIos ? '38px' : '25px',
+        backgroundColor: headerColor,
+      }"
     >
-      <image src="../static/back.png" mode="widthFix" />
-    </navigator>
+      <navigator open-type="navigateBack">
+        <image src="../static/back.png" mode="widthFix" />
+      </navigator>
+      <text :style="{ opacity: headerColor ? 1 : 0 }">本赛季排行榜</text>
+    </view>
     <image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
     <view class="rank-tabs">
       <view
@@ -144,26 +155,36 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
         >分</text
       >
     </view>
-  </view>
+  </scroll-view>
 </template>
 
 <style scoped>
 .container {
-  position: relative;
+  width: 100%;
+  height: 100vh;
   padding-bottom: 100px;
 }
 .header-bg {
   width: 100%;
 }
-.back-btn {
+.header {
+  width: 100%;
+  height: 60px;
   display: flex;
-  align-items: center;
-  position: absolute;
+  align-items: flex-center;
+  position: fixed;
+  top: 0;
+  transition: all 0.3s ease;
+  z-index: 10;
 }
-.back-btn > image {
+.header image {
   width: 22px;
   height: 22px;
-  margin: 0 10px;
+  margin: 20px 15px;
+}
+.header text {
+  transition: all 0.3s ease;
+  line-height: 60px;
 }
 .rank-tabs {
   width: calc(100% - 20px);