[Doc] optimzie demo display (#626)

docs/src/WapApp.vue

@@ -1,7 +1,37 @@
 <template>
-  <router-view />
+  <div>
+    <van-nav-bar
+      v-show="title"
+      fixed
+      class="van-doc-nav-bar"
+      :title="title"
+      left-arrow
+      :left-text="$t('back')"
+      @click-left="onBack"
+    />
+    <router-view />
+  </div>
 </template>
 
+<script>
+import { camelize } from 'packages/utils';
+
+export default {
+  computed: {
+    title() {
+      const name = this.$route.name;
+      return name ? camelize(name.split('/').pop()) : '';
+    }
+  },
+
+  methods: {
+    onBack() {
+      history.back();
+    }
+  }
+};
+</script>
+
 <style lang="postcss">
 body {
   color: #333;
@@ -10,4 +40,14 @@ body {
   font-family: Arial, Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
+
+.van-doc-nav-bar {
+  .van-nav-bar__title {
+    text-transform: capitalize;
+  }
+}
+
+.van-doc-demo-section {
+  padding-top: 46px;
+}
 </style>

docs/src/examples.js

@@ -24,6 +24,13 @@ const router = new VueRouter({
   routes: routesConfig
 });
 
+router.afterEach(() => {
+  if (router.currentRoute.name) {
+    window.scrollTo(0, 0);
+  }
+  Vue.nextTick(() => window.syncPath());
+});
+
 window.vueRouter = router;
 
 new Vue({ // eslint-disable-line

docs/src/utils/iframe-router.js

@@ -10,19 +10,21 @@ window.syncPath = function(dir) {
   const router = window.vueRouter;
   const isInIframe = window !== window.top;
   const currentDir = router.history.current.path;
-  const iframe = document.querySelector('iframe');
+  const pathParts = currentDir.split('/');
+  let lang = pathParts[0];
+  if (currentDir[0] === '/') {
+    lang = pathParts[1];
+  }
 
-  if (!isInIframe && !isMobile && iframe) {
-    const pathParts = currentDir.split('/');
-    let lang = pathParts[0];
-    if (currentDir[0] === '/') {
-      lang = pathParts[1];
+  if (!isInIframe && !isMobile) {
+    const iframe = document.querySelector('iframe');
+    if (iframe) {
+      iframeReady(iframe, () => {
+        iframe.contentWindow.changePath(lang, currentDir);
+      });
     }
-    setLang(lang);
-
-    iframeReady(iframe, () => {
-      iframe.contentWindow.changePath(lang, currentDir);
-    });
+  } else if (isInIframe) {
+    window.top.changePath(lang, currentDir);
   }
 };
 

docs/src/utils/lang.js

@@ -12,6 +12,7 @@ const langMap = {
     messages: zhCN
   }
 };
+let currentLang = '';
 
 setLang(getDefaultLang());
 
@@ -30,6 +31,11 @@ function getDefaultLang() {
 }
 
 export function setLang(lang) {
+  if (currentLang === lang) {
+    return;
+  }
+
+  currentLang = lang;
   if (window.localStorage) {
     localStorage.setItem('VANT_LANGUAGE', lang);
   }