docs

docs/ExamplesDocsApp.vue

@@ -3,6 +3,7 @@
     <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
     <div class="page-content">
       <router-view></router-view>
+      <footer-nav></footer-nav>
     </div>
   </div>
 </template>

docs/components/footer-nav.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="footer-nav">
+    <a
+      href="javascript:void(0)"
+      v-if="leftNav"
+      class="footer-nav__link footer-nav__left"
+      @click="handleNavClick('prev')">
+      <zan-icon name="arrow"></zan-icon>
+      {{ leftNav.title }}
+    </a>
+    <a
+      href="javascript:void(0)"
+      v-if="rightNav"
+      class="footer-nav__link footer-nav__right"
+      @click="handleNavClick('next')">
+      <zan-icon name="arrow"></zan-icon>
+      {{ rightNav.title }}
+    </a>
+  </div>
+</template>
+
+<script>
+import navConfig from '../nav.config.json';
+
+export default {
+  data() {
+    return {
+      currentPath: null,
+      nav: [],
+      leftNav: null,
+      rightNav: null
+    };
+  },
+
+  watch: {
+    '$route.path'() {
+      this.setNav();
+      this.updateNav();
+    }
+  },
+
+  methods: {
+    setNav() {
+      let nav = navConfig['zh-CN'];
+      for (let i = 0; i < nav.length; i++) {
+        let navItem = nav[i];
+        if (!navItem.groups) {
+          this.nav.push(nav[i]);
+        } else {
+          for (let j = 0; j < navItem.groups.length; j++) {
+            this.nav = this.nav.concat(navItem.groups[j].list);
+          }
+        }
+      }
+    },
+
+    updateNav() {
+      let baseUrl = '/component';
+      let currentIndex;
+
+      this.currentPath = this.$route.path.slice(baseUrl.length);
+
+      for (let i = 0, len = this.nav.length; i < len; i++) {
+        if (this.nav[i].path === this.currentPath) {
+          currentIndex = i;
+          break;
+        }
+      }
+      this.leftNav = this.nav[currentIndex - 1];
+      this.rightNav = this.nav[currentIndex + 1];
+    },
+
+    handleNavClick(direction) {
+      this.$router.push(`/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
+    }
+  },
+
+  created() {
+    this.setNav();
+    this.updateNav();
+  }
+};
+</script>
+
+<style>
+@component-namespace footer {
+  @b nav {
+    padding: 24px 0;
+    font-size: 30px;
+    overflow: hidden;
+
+    @e link {
+      color: #3388FF;
+      overflow: hidden;
+      padding-top: 35px;
+      position: relative;
+
+      .zan-icon {
+        width: 20px;
+        display: block;
+        font-size: 12px;
+        line-height: 20px;
+        border: 2px solid #3388FF;
+        border-radius: 50%;
+        text-align: center;
+        margin-bottom: 10px;
+        position: absolute;
+        top: 0;
+      }
+    }
+
+    @e left {
+      float: left;
+
+      .zan-icon {
+        transform: rotate(180deg);
+        left: 0;
+      }
+    }
+
+    @e right {
+      float: right;
+
+      .zan-icon {
+        right: 0;
+      }
+    }
+  }
+}
+</style>

docs/index.js

@@ -5,6 +5,7 @@ import navConfig from './nav.config.json';
 import routes from './router.config';
 import SideNav from './components/side-nav';
 import DemoBlock from './components/demo-block';
+import FooterNav from './components/footer-nav';
 import ZanUI from 'src/index.js';
 
 import 'packages/zanui-css/src/index.css';
@@ -19,6 +20,7 @@ Vue.use(VueRouter);
 Vue.use(ZanUI);
 Vue.component('side-nav', SideNav);
 Vue.component('demo-block', DemoBlock);
+Vue.component('footer-nav', FooterNav);
 
 let routesConfig = routes(navConfig);
 routesConfig.push({
@@ -32,11 +34,8 @@ const router = new VueRouter({
   routes: routesConfig
 });
 
-let indexScrollTop = 0;
 router.beforeEach((route, redirect, next) => {
-  if (route.path !== '/') {
-    indexScrollTop = document.body.scrollTop;
-  }
+  window.scrollTo(0, 0);
   if (isMobile()) {
     window.location.replace(location.pathname + 'examples.html#' + route.path);
     return;
@@ -45,16 +44,6 @@ router.beforeEach((route, redirect, next) => {
   next();
 });
 
-router.afterEach(route => {
-  if (route.path !== '/') {
-    document.body.scrollTop = 0;
-  } else {
-    Vue.nextTick(() => {
-      document.body.scrollTop = indexScrollTop;
-    });
-  }
-});
-
 new Vue({ // eslint-disable-line
   render: h => h(App),
   router