发现

src/App.vue

@@ -1,29 +1,15 @@
 <template>
   <div class="scroll-wrapper" ref="scroll">
     <router-view class="scroll-content" ref="content" />
-    <van-nav-bar
-      title="第九空间"
-      fixed
-      left-text=" "
-      right-text=" "
-      :left-arrow="false"
-      ref="bar"
-      z-index="20"
-      safe-area-inset-top
-      :border="false"
-    />
-
-    <app-bar></app-bar>
+    <!-- <app-bar></app-bar> -->
   </div>
 </template>
 
 <script>
 import BetterScroll from "better-scroll";
 import Pulldown from "@better-scroll/pull-down";
-import AppBar from "./components/AppBar.vue";
 BetterScroll.use(Pulldown);
 export default {
-  components: { AppBar },
   name: "App",
   provide() {
     return {
@@ -41,18 +27,24 @@ export default {
       timer: null,
     };
   },
+  watch: {
+    $route() {
+      if (this.bs) {
+        if (this.timer) {
+          clearTimeout(this.timer);
+        }
+        this.timer = setTimeout(() => {
+          this.bs.refresh();
+          this.bs.scrollTo(0, 0);
+        }, 500);
+      }
+    },
+  },
   mounted() {
     this.timer = setTimeout(() => {
       this.init();
-      if (this.$refs.bar.$el) {
-        this.$refs.content.$el.style.paddingTop =
-          this.$refs.bar.$el.offsetHeight + "px";
-      }
     }, 500);
   },
-  beforeUnmount() {
-    clearTimeout(this.timer);
-  },
   methods: {
     init() {
       this.bs = new BetterScroll(this.$refs.scroll, {

src/assets/svgs/search.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/search</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="铸造者" transform="translate(-334.000000, -101.000000)" fill="#FFFFFF">
+            <g id="search" transform="translate(334.000000, 101.000000)">
+                <path d="M18.2179931,17.283737 L20.8131488,19.8788927 C20.9377163,20.017301 21,20.1730104 21,20.3460208 C21,20.5190311 20.9342561,20.6712803 20.8027682,20.8027682 C20.6712803,20.9342561 20.5190311,21 20.3460208,21 C20.1730104,21 20.017301,20.9377163 19.8788927,20.8131488 L17.283737,18.2179931 C15.4429066,19.7266436 13.4013841,20.4152249 11.1591696,20.283737 C8.91695502,20.1522491 6.97231834,19.2352941 5.32525952,17.532872 C3.74740484,15.7474048 2.97923875,13.733564 3.02076125,11.4913495 C3.06228374,9.24913495 3.90657439,7.26989619 5.55363322,5.55363322 C7.26989619,3.90657439 9.24913495,3.06228374 11.4913495,3.02076125 C13.733564,2.97923875 15.7474048,3.74740484 17.532872,5.32525952 C19.2352941,6.97231834 20.1522491,8.91695502 20.283737,11.1591696 C20.4152249,13.4013841 19.7266436,15.4429066 18.2179931,17.283737 Z M11.6574394,18.9653979 C13.733564,18.9100346 15.4567474,18.1972318 16.8269896,16.8269896 C18.1972318,15.4567474 18.9100346,13.733564 18.9653979,11.6574394 C18.9100346,9.58131488 18.1972318,7.85813149 16.8269896,6.48788927 C15.4567474,5.11764706 13.733564,4.40484429 11.6574394,4.34948097 C9.58131488,4.40484429 7.85813149,5.11764706 6.48788927,6.48788927 C5.11764706,7.85813149 4.40484429,9.58131488 4.34948097,11.6574394 C4.40484429,13.733564 5.11764706,15.4567474 6.48788927,16.8269896 C7.85813149,18.1972318 9.58131488,18.9100346 11.6574394,18.9653979 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/router/index.js

@@ -14,6 +14,11 @@ const routes = [
         name: "home",
         component: () => import("../views/Home.vue"),
       },
+      {
+        path: "/discover",
+        name: "discover",
+        component: () => import("../views/Discover.vue"),
+      },
       {
         path: "/mine",
         name: "mine",

src/views/Discover.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="discover">
+    <div class="top">
+      <div class="top-btn">
+        <div
+          class="btn"
+          :class="{ active: active === 'creator' }"
+          @click="active = 'creator'"
+        >
+          铸造者
+        </div>
+        <div class="btn">收藏探索</div>
+      </div>
+      <div class="search">
+        <img src="../assets/svgs/search.svg" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "discover",
+  data() {
+    return {
+      active: "creator",
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  display: flex;
+  padding: 10px 16px;
+  position: sticky;
+  top: 0;
+  .top-btn {
+    flex-grow: 1;
+    .btn {
+      font-size: 16px;
+      font-family: ZhenyanGB;
+      font-weight: 400;
+      line-height: 26px;
+      display: inline-block;
+      vertical-align: text-bottom;
+
+      &.active {
+        color: @prim;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 30px;
+      }
+    }
+
+    .btn + .btn {
+      margin-left: 30px;
+    }
+  }
+}
+</style>

src/views/Index.vue

@@ -67,3 +67,9 @@ export default {
   },
 };
 </script>
+
+<style lang="less" scoped>
+.container {
+  box-sizing: border-box;
+}
+</style>