[Doc] update mobile nav (#1578)

docs/src/components/DemoList.vue

@@ -9,11 +9,14 @@
       <span :class="{ active: $vantLang === 'zh-CN' }" @click="switchLang('zh-CN')">中文</span>
     </div>
     <h2 class="zanui-desc">{{ description }}</h2>
-    <div class="mobile-navs">
+    <template v-for="item in navList" v-if="item.showInMobile">
-      <div class="mobile-nav-item" v-for="(item, index) in navList" v-if="item.showInMobile" :key="index">
+      <mobile-nav
-        <mobile-nav v-for="(group, index) in item.groups" :group="group" :base="$vantLang" :nav-key="index" :key="index" />
+        v-for="(group, index) in item.groups"
-      </div>
+        :group="group"
-    </div>
+        :base="$vantLang"
+        :key="index"
+      />
+    </template>
   </div>
 </template>
 

docs/src/components/MobileNav.vue

@@ -1,145 +1,51 @@
 <template>
-  <div class="mobile-nav-group">
+  <van-collapse v-model="active" class="mobile-nav">
-    <div
+    <van-collapse-item :title="group.groupName" :name="group.groupName" class="mobile-nav__item">
-      class="mobile-nav-group__title mobile-nav-group__basetitle"
+      <van-cell
-      :class="{
+        v-if="!navItem.disabled"
-        'mobile-nav-group__title--open': isOpen
+        v-for="(navItem, index) in group.list"
-      }"
+        :key="index"
-      @click="handleNavTitleClick">
+        :to="'/' + base + navItem.path"
-      {{ group.groupName }}
+        :title="navItem.title"
-    </div>
+        is-link
-    <div class="mobile-nav-group__list-wrapper" :class="{ 'mobile-nav-group__list-wrapper--open': isOpen }">
+      />
-      <ul class="mobile-nav-group__list" :class="{ 'mobile-nav-group__list--open': isOpen }">
+    </van-collapse-item>
-        <template v-for="(navItem, index) in group.list">
+  </van-collapse>
-          <li
-            :key="index"
-            class="mobile-nav-group__title"
-            v-if="!navItem.disabled">
-            <router-link
-              active-class="active"
-              :to="'/' + base + navItem.path">
-              <p>
-                {{ navItem.title }}
-              </p>
-            </router-link>
-            <van-icon name="arrow" />
-          </li>
-        </template>
-      </ul>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
   props: {
-    group: {
-      type: Object,
-      default: () => {
-        return [];
-      }
-    },
     base: String,
-    navKey: [String, Number]
+    group: Object
   },
 
   data() {
     return {
-      isOpen: false
+      active: []
     };
-  },
-
-  mounted() {
-    this.isOpen = JSON.parse(sessionStorage.getItem('mobile-nav-' + this.navKey));
-  },
-
-  methods: {
-    handleNavTitleClick() {
-      this.isOpen = !this.isOpen;
-      sessionStorage.setItem('mobile-nav-' + this.navKey, this.isOpen);
-    }
   }
 };
 </script>
 
 <style lang="postcss">
-.mobile-nav-group {
+.mobile-nav {
-  border-radius: 2px;
+  &__item {
-  margin-bottom: 15px;
+    margin-bottom: 20px;
-  background-color: #fff;
-  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
-
-  &__basetitle {
-    padding-left: 20px;
   }
 
-  &__title {
+  &::after {
-    font-size: 16px;
+    display: none;
-    color: #333;
-    line-height: 56px;
-    position: relative;
-    user-select: none;
-
-    &:active {
-      background-color: $active-color;
-    }
-
-    &--open {
-      color: #999;
-    }
-
-    a {
-      color: #333;
-      display: block;
-      user-select: none;
-      padding-left: 20px;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-      &:active {
-        background: #ECECEC;
-      }
-
-      > p {
-        margin: 0;
-        border-top: 1px solid #e5e5e5;
-      }
-    }
-
-    .van-icon-arrow {
-      position: absolute;
-      font-size: 12px;
-      line-height: 1;
-      top: 24px;
-      right: 20px;
-    }
   }
 
-  &__list-wrapper {
+  .van-collapse-item__content {
-    height: 0;
-    overflow: hidden;
-
-    &--open {
-      height: auto;
-    }
-  }
-
-  &__list {
-    transform: translateY(-50%);
-    transition: transform .2s ease-out;
-
-    &--open {
-      transform: translateY(0);
-    }
-  }
-
-  li {
-    list-style: none;
-  }
-
-  ul {
     padding: 0;
-    margin: 0;
+  }
-    overflow: hidden;
+
+  .van-collapse-item__title {
+    font-size: 16px;
+    line-height: 36px;
+    align-items: center;
   }
 }
 </style>

docs/src/mobile.js

@@ -1,15 +1,18 @@
+import '../../packages/vant-css/src/index.css';
+import './components/nprogress.css';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './WapApp';
 import routes from './router';
 import progress from 'nprogress';
-import '../../packages/vant-css/src/index.css';
 import 'vant-doc/src/helper/touch-simulator';
-import './components/nprogress.css';
 
 const router = new VueRouter({
   mode: 'hash',
-  routes: routes(true)
+  routes: routes(true),
+  scrollBehavior(to, from, savedPosition) {
+    return savedPosition || { x: 0, y: 0 };
+  }
 });
 
 router.beforeEach((route, redirect, next) => {
@@ -19,9 +22,6 @@ router.beforeEach((route, redirect, next) => {
 
 router.afterEach(() => {
   progress.done();
-  if (router.currentRoute.name) {
-    window.scrollTo(0, 0);
-  }
   if (!router.currentRoute.redirectedFrom) {
     Vue.nextTick(() => window.syncPath());
   }