[Doc] optimzie demo display (#626)

docs/demos/views/cell-swipe.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
     <demo-section>
+      <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
       <demo-block :title="$t('basicUsage')">
         <van-cell-swipe :right-width="65" :left-width="65">
           <span slot="left">{{ $t('button1') }}</span>

docs/demos/views/checkbox.vue

@@ -65,8 +65,6 @@ export default {
 
 <style lang="postcss">
 .demo-checkbox {
-  background: #fff;
-
   .van-checkbox {
     margin: 10px 0 0 20px;
   }

docs/demos/views/pull-refresh.vue

@@ -1,11 +1,11 @@
 <template>
-  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-    <demo-section name="pull-refresh" background="#fff">
+  <demo-section name="pull-refresh">
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
       <demo-block :title="$t('basicUsage')">
         <p>{{ $t('text') }}: {{ count }}</p>
       </demo-block>
-    </demo-section>
-  </van-pull-refresh>
+    </van-pull-refresh>
+  </demo-section>
 </template>
 
 <script>
@@ -42,6 +42,13 @@ export default {
 
 <style lang="postcss">
 .demo-pull-refresh {
+  .van-pull-refresh {
+    &,
+    &__track {
+      height: 100%;
+    }
+  }
+
   p {
     margin: 10px 0 0 15px;
   }

docs/demos/views/radio.vue

@@ -66,8 +66,6 @@ export default {
 
 <style lang="postcss">
 .demo-radio {
-  background: #fff;
-
   .van-radios {
     padding: 0 20px;
 

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);
   }