bug

src/project/fengdu/AppCircle/AppCircle.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="AppCircle">
-    <div class="top">
+  <div class="AppCircle" :style="{paddingTop: (statusBarHeight + 110) + 'px'}">
+    <div class="header" :class="[isFixed ? 'header-active' : '']">
+      <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
+      <div class="nav-bar">
+        <h2>邻里互助</h2>
+      </div>
+    </div>
+    <div class="top" :style="{top: (statusBarHeight + 44) + 'px'}">
       <div class="left">
         <span @click="changeTab(0)" :class="{active:currIndex === 0}">广场</span>
         <span @click="changeTab(1)" :class="{active:currIndex === 1}">社区</span>
@@ -76,6 +82,7 @@
     appName: '邻里互助',
     navigationBarBackgroundColor: '#ffffff',
     navigationBarTextStyle: 'black',
+    customNavigation: true,
 
     data() {
       return {
@@ -84,6 +91,8 @@
         list: [],
         isMore: false,
         current: 1,
+        isFixed: false,
+        statusBarHeight: 20,
         total: 0
       }
     },
@@ -117,6 +126,10 @@
       }
     },
 
+    onPageScroll (params) {
+      this.isFixed = params.scrollTop > 60
+    },
+
     onUnload() {
       uni.$off('updateList')
     },
@@ -265,6 +278,33 @@
     padding-top: 120px;
     padding-bottom: 40px;
 
+    .header {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 111;
+      width: 100%;
+      opacity: 1;
+      transition: all 0.2s ease;
+      .status-bar {
+        background: #fff;
+      }
+
+      .nav-bar {
+        position: relative;
+        height: 88px;
+        line-height: 88px;
+        color: #000;
+        font-size: 32px;
+        font-weight: 600;
+        background: #fff;
+        text-align: center;
+      }
+
+      &.header-active {
+      }
+    }
+
     div {
       box-sizing: border-box;
     }