[Doc] update demo index (#1539)

docs/src/Preview.vue

@@ -13,7 +13,7 @@
 <script>
 const PREFIX = 'https://img.yzcdn.cn/vant-weapp/';
 const MAP = {
-  index: 'index-201808121630.png',
+  index: 'index-201904170551.png',
   col: 'layout-201808092138.png',
   transition: 'transition-20180821.png'
 };
@@ -33,7 +33,7 @@ body {
   margin: 0;
   color: #333;
   line-height: 1;
-  background-color: #f8f8f8;
+  background-color: #f2f3f5;
   font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei',
     Tohoma, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

example/app.wxss

@@ -1,7 +1,7 @@
 page {
   color: #333;
   font-size: 16px;
-  background: #f8f8f8;
+  background: #f2f3f5;
   min-height: 100vh;
   box-sizing: border-box;
   padding: 0 0 100rpx;

example/config.js

@@ -1,6 +1,7 @@
 export default [
   {
     groupName: '基础组件',
+    icon: 'https://img.yzcdn.cn/vant/basic-0401.svg',
     list: [
       {
         path: '/button',
@@ -30,6 +31,7 @@ export default [
   },
   {
     groupName: '表单组件',
+    icon: 'https://img.yzcdn.cn/vant/form-0401.svg',
     list: [
       {
         path: '/checkbox',
@@ -79,6 +81,7 @@ export default [
   },
   {
     groupName: '反馈组件',
+    icon: 'passed',
     list: [
       {
         path: '/action-sheet',
@@ -108,6 +111,7 @@ export default [
   },
   {
     groupName: '展示组件',
+    icon: 'photo-o',
     list: [
       {
         path: '/collapse',
@@ -141,6 +145,7 @@ export default [
   },
   {
     groupName: '导航组件',
+    icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
     list: [
       {
         path: '/badge',
@@ -162,6 +167,7 @@ export default [
   },
   {
     groupName: '业务组件',
+    icon: 'ellipsis',
     list: [
       {
         path: '/area',

example/pages/dashboard/index.js

@@ -3,6 +3,13 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    list
+    list,
+    activeName: []
+  },
+
+  onChangeCollapse(event) {
+    this.setData({
+      activeNames: event.detail
+    });
   }
 });

example/pages/dashboard/index.wxml

@@ -5,18 +5,35 @@
   </view>
   <view class="desc">轻量、可靠的小程序 UI 组件库</view>
 
-  <block wx:for="{{ list }}" wx:for-item="group" wx:key="group.title">
-    <view class="mobile-nav">
-      <view class="mobile-nav__title">{{ group.groupName }}</view>
-      <van-cell-group>
-        <van-cell
-          wx:for="{{ group.list }}"
-          wx:key="item.title"
-          is-link
-          url="/pages{{ item.path }}/index"
-          title="{{ item.title }}"
-        ></van-cell>
-      </van-cell-group>
-    </view>
-  </block>
+  <van-collapse
+    wx:for="{{ list }}"
+    wx:for-item="group"
+    wx:key="group.title"
+    value="{{ activeNames }}"
+    border="{{ false }}"
+    bind:change="onChangeCollapse"
+  >
+    <van-collapse-item
+      clickable
+      is-link="{{ false }}"
+      custom-class="mobile-nav"
+      title-class="mobile-nav__title"
+      content-class="mobile-nav__content"
+      title="{{ group.groupName }}"
+      name="{{ group.groupName }}"
+    >
+      <van-icon
+        name="{{ group.icon }}"
+        slot="right-icon"
+        custom-class="mobile-nav__icon"
+      />
+      <van-cell
+        wx:for="{{ group.list }}"
+        wx:key="item.title"
+        is-link
+        url="/pages{{ item.path }}/index"
+        title="{{ item.title }}"
+      />
+    </van-collapse-item>
+  </van-collapse>
 </view>

example/pages/dashboard/index.wxss

@@ -1,11 +1,14 @@
+page {
+  padding-bottom: 0;
+}
+
 .container {
-  padding: 45px 15px 0;
+  padding: 45px 20px 20px;
 }
 
 .title {
-  margin: 0 0 15px;
-  text-align: center;
-  user-select: none;
+  padding-left: 15px;
+  margin-bottom: 10px;
 }
 
 .logo,
@@ -16,9 +19,8 @@
 
 .title-text {
   font-size: 32px;
+  font-weight: 500;
   margin-left: 15px;
-  font-weight: 400;
-  font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
 }
 
 .logo {
@@ -28,17 +30,32 @@
 
 .desc {
   font-size: 14px;
-  color: #455a64;
-  margin: 0 0 60px;
-  text-align: center;
+  color: #7d7e80;
+  margin: 0 0 45px;
+  padding-left: 15px;
 }
 
 .mobile-nav {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .mobile-nav__title {
   font-size: 16px;
-  background-color: #fff;
-  padding: 17px 15px;
+  font-weight: 500;
+  line-height: 40px;
+  align-items: center;
+  border-radius: 2px;
+}
+
+.mobile-nav__content {
+  padding: 0 !important;
+}
+
+.mobile-nav__icon {
+  font-size: 24px !important;
+  margin-top: 8px;
+}
+
+.mobile-nav__icon image {
+  width: 100%;
 }

example/pages/icon/index.wxss

@@ -1,3 +1,7 @@
+page {
+  padding-bottom: 0;
+}
+
 .col {
   text-align: center;
   height: 100px;